Ответы пользователя по тегу CSS
  • Где найти интересный проект?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Проблема знаете в чем?

    Вот допустим попрошуя вас... "А сделай ка мне приложеньку на angularjs, простенький личный канбан борд + таймер аки pomidoro + общий таймер сколько я чего делал и отдыхал". И вы может быть даже и сделаете. Вот только... потом придется рефакторить, переписывать куски и т.д. Ну то есть как-то не выгодно выходит, особенно если у вас нет опыта с ангуляром.
    Ответ написан
    8 комментариев
  • Angular Material - Flex layout - опыт работы - поддержка браузеров?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Стоит ли оконьчательно переходить на Layout атрибюты которые предлагают Angular Material?


    лично мне не нравится подход с заданием стилей через атрибуты. Вроде бы только-только отказались от ада c инлайн стилями для элементов и на тебе.

    Может всетаки продолжать писать чистый CSS - Grid как всегда?

    чистый css грид не сможет дать вам тех возможностей которые дают флексбоксы

    Или просто нехватает опыта в работе с layout через angular material?

    Скорее не хватает опыта работы с flexbox. Ангуляр тут непричем.

    поддержка браузеров?

    caniuse.com/#search=flex - отдельно смотреть секцию known issues
    Ответ написан
    Комментировать
  • Что значит "в соответствии с подходом bootstrap" в постановке задачи?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    вам черным по белому написали - сделайте приблизительно такую же страничку (похожую визуально) на бутстрапе. Кроме бутстрапа использовать что-то готовое запрещено.

    Вперед и с песней. Что бы отвадить вас от мысли подглядывать и выдерать предлагаю вам сделать скриншет страницы и ориентироваться на него.

    Если же вы не в состоянии на бутстрапе собрать такую страничку - значит тестовое задание вы провалили.
    Ответ написан
    Комментировать
  • Почему clearfix называют хаком, костылем?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    clearfix это кастыль, так как float элементы изначально не предполагалось использовать для построения лэйаута страницы. Но что поделать, flexbox-ы только появились.

    Если вы когда-нибудь видели варианты обтекания картинок текстом в вордах всяких - то думаю вы сможете уловить суть этого css свойства.
    Ответ написан
    Комментировать
  • Как запретить UglifyJS минимизировать часть строки?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Комментировать
  • Насколько вы используете flexbox? Почему нет?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Использую повсеместно когда в требованиях к проекту пишут IE11+. Когда IE10+ - аккуратно но бывает использую. IE9 - боль и унижение, благо таких проектов да с какими-то сложными лэйаутами у меня уже нет.
    Ответ написан
    1 комментарий
  • Как автоматизировать создание критического пути с gulp?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    в этом нет особо смыслей, так как основная идея criticat path стилей в том что они должны быть заинлайнены прямо в страницу, а это значит что нам нужны только стили для одной страницы.
    Ответ написан
  • Как можно при компиляции less в css сохранить комментарии?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    ставить комментарии правильно, в формате css.

    А вообще есть такая чудная штука как sourcemaps и тогда не надо изобретать ничего.
    Ответ написан
    1 комментарий
  • Какие библиотеки для конвертации цвета самые быстрые?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    о скорости работы различных библиотек


    Вообще-то там простая формула и она... ну как бы одинаково работает для всех в пределах одного языка программирования.
    Ответ написан
  • Чем парсить CSS при помощи php?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    https://github.com/sabberworm/PHP-CSS-Parser

    В целом же задачу можно реализовать в 20-30 строк, как уже говорилось, путем написания своего примитивного парсера посимвольного (с регулярками). Но это ж писать надо... и не факт что мы покроем все кейсы.

    но если вам скучно, то вот вам набросок идеи, кривой и не красивый...
    <?php
    
    $styles = "background : 'te;st'; font-size: 12px";
    
    parse($styles); // ["background", "'te;st'", "font-size", "12px"]
    
    function parse($rawStyles) {
        $styles = rtrim($rawStyles, ';') . ';';
        $isInString = false;
        $offset = 0;
        $chunks = [];
        $lastChunkOffset = 0;
        while(preg_match('/[:;\'\"]/', $styles, $matches, PREG_OFFSET_CAPTURE, $offset)) {
            $offset = $matches[0][1] + 1;
            $char = $matches[0][0];
            if ($isInString && !in_array($char, ['\'', '"'])) {
                continue;
            }
            if (in_array($char, ['\'', '"'])) {
                $isInString =  !$isInString;
                continue;
            }
    
            $chunks[] = trim(mb_substr($styles, $lastChunkOffset, $offset - $lastChunkOffset-1));
    
            $lastChunkOffset = $offset;
        }
    
        return $chunks;
    }
    Ответ написан
    3 комментария
  • В чем смысл PostCSS сегодня?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    В последнее время началась мода на PostCSS - много постов, статей о нем.

    А почему бы и да? Любые инструменты надо пиарить что бы народ ими пользовался. Ибо народ будет пользоваться тем что на слуху (ну или тем с чем привык работать). Больше народа - больше идей, быстрее идет развитие, формируется комьюнити и поддерживать решение становится чуть проще. Да и приятно это когда твои наработки используют.

    Есть даже версия (не без оснований), что это - прародитель всех современных препроцессоров и веяний.

    Где ж это вы такое прочитали? postcss был попыткой решить проблемы, которые нельзя решить препроцессорами (или можно но долго).

    Окей, будем считать так, тем паче, что история коммитов на Гите это скорее подтверждает.

    Что именно подтверждает? сначала был Sass написанный рубистами что бы CSS можно было бы готовить так же нежно как они готовят HTML на HAML (кофескрипт туда же, рубистам хотелось сделать js похожим на ruby). И это заметте было в 2006-ом году! тогда и js был медленный, и V8 может только в планах был...

    Ведь все, что умеет PostCSS, умеют и препроцессоры

    postcss из коробки не умеет ровным счетом ничего. Он может только загрузить AST CSS файла и слепить из него обратно тот же CSS.

    И именно в этом сила postcss - модульность. Все существующие препроцессоры монолитны. То есть вы не можете просто так взять и добавить что-то свое туда. Да, в последних версиях less (и вроде как sass туда же подтягивается) у вас есть примитивный набор средств что бы вклиниться в процесс обработки AST документа и добавить какие-то примитивные вещи. Но это не удобно. Если вы хотите динамически менять проперти (например пересчитывать rem в em) или добавлять еще (опять же для того что бы руками не плодить в css кастыли для разных браузеров и делать это автоматом, на завязываясь ни на миксины и оставляя CSS чистым) свойств, но сделать это на less/sass сложно.

    Намного проще взять postcss и натравить это дело на результат работы препроцессоров.

    Давайте придумаем пример того, что можно легко и просто сделать при помощи пост процессоров и что сложно сделать с препроцессорами. Самое первое что приходит в голову - инлайнинг ресурсов. Например мелкие png-ки. Или работа с относительными путями, ресолвинг оных точнее. В этом случае мы с postcss напишем маленькую функцию, которая пробежится по всему абстрактному синтаксическому дереву и найдет использование url(). далее мы можем проверить размеры картинки и заинлайнить их (если у них размер достаточно маленький). Или собрать список всех задействованных картинок и использовать их потом (например что бы скопировать только то, что мы реально используем).

    Вот как-то так. А за счет того что мы имеем доступ целиком и полностью к формированию и обработке AST мы можем и синтаксис CSS развивать. Примерами могут служить многочисленные плагины аля cssnext и т.п. Можно даже большую часть фич sass в виде плагинов подключить.

    А самое забавное, что работает это все быстрее того же libsass на плюсах. За счет архитектуры (имею в виду не голый postcss а с набором плагинов добавляющих функциональность sass).
    Ответ написан
    Комментировать
  • Что такое Postcss?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    когда есть sass?


    sass - фиксированный ПРЕ процессор, postcss - ПОСТ процессор, то есть он позволяет вам работать с AST CSS файла, расширять синтаксис, добавлять поведение по вашему вкусу и т.д. Простой пример того, зачем нужен postcss - autoprefixer

    Посмотрите презенташку Андрея Ситника (автор postcss) и вообще погуглите объяснений от него.
    https://www.youtube.com/watch?v=XJaJqLVaR-c
    Ответ написан
    3 комментария
  • В какой программе отрисовать и как реализовать на сайте 3d модели?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    1) что угодно, у вас тут конкретно можно "выдавить" (extrude) из 2d формы. Такие штуки удобно делать во всяких autocad-ах и тд.

    2) three.js - там есть примеры и загрузчики моделек.
    Ответ написан
    4 комментария
  • БЭМ. Блок и его модификатор?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    как бы сделали вы?

    базовые стили (общие) в header, остальное в модификаторы в зависимости от нужд. Ну и да, не привязывайте именование модификаторов к контексту, для того что бы скажем добавить заголовкам маргин сверху от слайдера у вас элементы есть (slide__header)

    В целом если сделать так:

    <div class="page">
      <div class="page__header">
        <h1 class="header">Заголовк страницы</h1>
      </div>
      <div class="page__slider">
        <div class="slider">
              <div class="slider__item slide"> 
                <h1 class="slide__header header header--small" >Заголовк слайда</h1>
              </div>
        </div>
      </div>
    <div>


    ну вот как-то так... для более нагладного примера лучше привести макет или что-то упрощенное но передающую суть проблемы.
    Ответ написан
    6 комментариев
  • БЭМ. Не понятие основных понятий - блок, элемент, модификатор?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Получается что блок это чисто Namespace для других сущностей.

    как-то так да. Вот только у вас пример не правильный.

    <div class="blog"> 
       <div class="header header_blog">Заголовок блога</div>
       <div class="date date_blog">19.19.1900</div>
       <div class="body body_blog">текст</div>
    </div>
    <div class="comment"> 
       <div class="comment_date date">19.19.1900</div>
       <div class="comment_body body">текст</div>
    </div>


    Вот так правильно.

    Далее, помимо того что блок это "неэмспейс" он так же может содержать базовые стили, но не размеры и позиционирование. За это отвечают элементы.

    Грубо говоря.

    .blog{}
    .blog__date{} // задает положение даты в... блоге? В блоге нет дат, даты есть у постов, так что выносим это в .post
    .blog__header{} // задает положение заголовка, ширина, паддинги, маргины
    .blog__body{} //задает положение содержимого в блоге, только положение на странице, ширина, паддинги, маргины
    Ответ написан
    7 комментариев
  • Каким тегом можно заменить div class="main" в html 5?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    https://developer.mozilla.org/en/docs/Web/HTML/Element - тут все есть. Для конкретики не хватает пояснения что для вас "главный контент".
    Ответ написан
    Комментировать
  • Что можно потерять отказавшись от компонентных фраймворков?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    но прежде, хочется узнать - что я при этом потеряю

    возможность быстро набросать UI админки. В целом потеряете вы не сильно много, бутстрап хорош только при прототипировании или если реально лень делать UI самому. Много готового. Для админок самое то, и то приходится частенько что-то свое пилить.

    Что у меня не будет работать так, как работает у bs3?

    все. У вас не тот же уровень знаний что у чуваков из твиттера который разрабатывали TB, у вас нет огромнейшего комьюнити которые делают регулярные баг репорты и пул реквестят ну и вы один и жизнь у вас одна.

    Если вам нужно сделать то что уже есть в бутстрапе - проще подключить стили этого конкретного компонента и не париться. Другое дело что весь бутстрап подключать для этого не надо.

    как правильно изменить стили bs3, чтобы было по моему

    тут зависит от того что вы хотели сделать. У меня скажем нет особо проблем с тем, что бы переопределить стили, но некоторые вещи я сразу делаю с нуля а не пытаюсь извращаться со стилями бутстрапа. Вопрос баланса. Если вас не удовлетворяет компонент только чуть чуть - можно юзать компонент. Если переделка стилей на вскидку выходит нам в довольно большое количество времени - либо ищем что-то более подходящее либо вообще пишем сами.

    Зависит от задачи словом.
    Ответ написан
    1 комментарий