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

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Вопрос не совсем корректно сформулирован :)
    Сами по себе префиксы не умирали. Старые версии браузеров не стали вдруг поддерживать эти свойства без префиксов. Изменилась лишь доля рынка у свежих и адекватных браузеров, следовательно, нет необходимости использовать префиксы. Концептуально не поменялось ничего, лишь наш с вами выбор - какие минимальные версии браузеров мы поддерживаем при разработке сайта.
    Ответ написан
    Комментировать
  • HTML5 как сделать правильный каркас?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    HTML 5, если уж так по-новомодному цепляться к этой магической цифре 5, строится в первую очередь вокруг семантики. Семантика выплывает из контекста, создаваемого контентом. Поэтому без понимания того, какой у вас контент этой страницы, все советы будут достаточно абстрактны. Разберитесь с блочными, строчными, и особенно секционирующими элементами. Разберитесь с семантической нагрузкой на элементы. А если совсем кратко, примитивная структура:
    header
    nav
    article
      header
      ... основной контент ...
      footer
    aside
      ... второстепенный контент ...
    footer

    или
    header
    nav
    section
      article
        header
        ...
        footer
      article
        header
        ...
        footer
    section
      header
      ...
      footer
    footer
    Ответ написан
    Комментировать
  • Как вы верстаете Wordpress темы?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Использование _s - очень правильная идея. Верстка сначала в html - очень неправильная, разве что есть уже свой собственный базовый код, основанный на WordPress. Почему? Потому что WordPress генерит везде кучу своих CSS-классов, и правильно использовать именно их.

    Процесс такой:
    - идея, эскизы на бумаге, продумывание особенностей, модульные сетки, прототип
    - дизайн в фотошопе
    - сборка функциональной части шаблона - подключение нужных плагинов, вывод метаполей, весь кастомный вывод - в общем, необходимо вывести в шаблон (_s) весь реальный контент (или приближенный к реальному), а не верстать с Lorem Ipsum
    - а вот теперь самое интересное - SCSS, mobile first + javascript. В общем, чистый frontend.
    Ответ написан
    4 комментария
  • Почему FireFox выдает такой бордак в шрифтах?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    В каком формате шрифт подключен?
    Вообще, если не заморачиваться IE меньше 9, можно оставить только один - woff. Его корректно понимают все браузеры. В крайнем случае дополнительно подключать ttf (который сгенерирован через WebFont Generator, а не родной из системы). Все остальные хаки пора уже отправлять на пенсию.
    Ответ написан
    Комментировать
  • Как уменьшить вес шрифтов при верстке?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    1. Кидать обычные ttf в папку - это вообще совсем неправильно. Это десктоп-версии шрифтов, они тяжелые.
    2. Необходимо использовать генератор webfonts, FontSquirrel - отличный вариант. Генерить только необходимые языки и символы, вырезать метаданные.
    3. Если нужна поддержка IE9+ (ну и все нормальные браузеры) - генерируйте только woff (см. поддержку). Это самый легкий формат.
    4. Если нужна поддержка IE8 и ниже - придется использовать EOT-формат.

    или использовать Google Fonts, который все это дело позволяет тоже настроить. К тому же, есть 2 бонуса:
    1. Это запросы на внешний домен, значит во время загрузки страницы свой файлы будут быстрее грузиться (загрузка будет идти параллельно с двух доменов)
    2. У многих пользователей шрифты уже будут в кеше.
    Ответ написан
    1 комментарий
  • Как подружить IE8 и выше с @media screen and?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    IE9+ поддерживает
    Для древних есть Respond. Что именно не сработало с Respond.js?

    Что касается объяснений директору/заказчику - надо уже всех приводить к состоянию IE9+, и опускать поддержку IE8-. В качестве аргумента используется gs.statcounter.com - по нему четко видно, что современные мобильные устройства уже давно превысили 15-20%, в то время как IE8- снизился уже совсем серьезно. Все, пора его выбросить на свалку раз и навсегда.
    Ответ написан
  • По поводу HTML5

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Не просто стоит, а необходимо. Поисковики уже давно понимают HTML5 со всеми семантическими плюшками и учитывают это в индексе. Да епт, поисковики уже кагбэ прозрачно намекнули, что сайты без респонсивной верстки вполне скоро будут стоять в индексе ниже, а Вы еще даже за семантику не брались. Переход безболезненный и быстрый, необходимо это сделать вчера!
    Ответ написан
    Комментировать
  • Как сократить количество отображаемых строк в css?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Фиксированная высота + overflow: hidden. Это костыль, но поскольку вы не брезгуете magic numbers, то вполне сгодится.

    По уму - html5hub.com/ellipse-my-text/#i.ynjfrd17pscqpw
    Ответ написан
  • Оптимизация подключения скриптов/css в Wordpress?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    А вы про conditional проверки читали? is_category( $cat_id ) например, их очень много. Полная гибкость, есличо. Проверяете на необходимое условие и грузите что надо, нет необходимости плодить шаблоны. Что касается скриптов и стилей, подгружаемых плагинами - всегда есть возможность выяснить на каком хуке и приоритете они грузятся и модифицировать. Можно отключить и подключить вручную там и тогда, когда нужно. Или наоборот, отключать где не нужно. В общем, есть много способов это сделать, без дополнительных шаблонов и плагинов.

    Например, если я в процессе разработки проекта вижу скрипты и стили какого-то плагина, которые 100% будут site-wide и всегда, я отключаю их динамическую загрузку самим плагином, вручную переношу скрипты и стили к своим и сливаю их. Минус - со временем, когда плагин обновит версии скриптов, придется вручную их менять. Но, так как мы на поддержке все равно раз в месяц или по мере появления Security фиксов проводим maintenance, это не проблема. Плюс - никаких лишних http-запросов, объединенные скрипты и стили в один лучше компресятся.
    Ответ написан
  • Как организовать процесс создания собственного css-фреймворка?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    1. Если у вас normalize "не справился с задачей" - это первый тревожный звоночек, вероятнее всего вы что-то делаете не так. Без обид.
    2. Второй тревожный звонок - вы хотите создать модульный, универсальный и гибкий фреймворк без использования препроцессоров (SASS/SCSS/LESS). Это путь в никуда.
    3. По сути вопроса:
    - переходите на препроцессоры, насильно. Какой выберете - дело ваше, я предпочитаю SCSS
    - разбивайте на модули
    - используйте Normalize
    - пишите эффективный и правильный CSS
    - забудьте про идею создать идеальный фреймворк, который можно использовать с минимальными правками везде и всегда - это утопия
    - научитесь потом эти модули правильно собирать в единый CSS-файл, с минификацией и т.д. Например, с помощью Grunt.
    - удачи :)
    Ответ написан
  • Почему не работают поповеры, тултипы и модальные окна на сайте при просмотре через Ipad?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Фокус в том, что на iPad по сути отсутствует такое событие как MouseOver / Hover. Там есть события Tap / Double Tap / Gestures. Проще говоря, если у вас взаимодействие завязано на наведение мышкой на объекты, то планшет этого не понимает, ибо на нем наведения нету. По поводу прямоугольника при клике - это, скорее всего, и есть попытка айпада отобразить состояние :hover / :active. Первый тап - имитация события наведения, второй тап - собственно переход по ссылке.
    Ответ написан
    2 комментария
  • Как не надо верстать сайты?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    А никак. Можно частично закрутить гайки (ограничить возможности), предусмотреть все элементы, в том числе прописать max-width, min-width и прочие полезности, дабы неожиданные правки не разрывали верстку. Но на 100% не получится. И есть только один вариант - объяснить клиенту, что сайт это живой организм, и взять его на платную поддержку. Ежемесячный объем правок в конце месяца оформлять как счет за почасовку. Тогда все довольны - клиент возможностями, разработчик красивостями, пользователи - адекватным сайтом без "вырвиглазов".
    Ответ написан
    Комментировать
  • Как верстать иконку с подписью?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Иконки шрифтом - это позволит анимировать их как угодно без лишних состояний. Минус спрайтов - излишние данные + неудобство поддержки. Если вдруг вам нужно поменять цвета для наведения - нужно редактировать сам спрайт. Со шрифтами этой проблемы нет. Плюс шрифт - это вектор.

    Выравнивание - display: table для родителя, display: table-cell для элементов. Само выравнивание, соответственно - vertical-align: top/middle/bottom/baseline. Свежая версия Normalize.css, кстати, уже перешла на display: table.
    Ответ написан
  • Можно ли верстать сайт из макета в Ai?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Да без проблем. Что .psd, что .ai - какая разница? Проблема с конкретным верстальщиком может возникнуть только если он не знает Illustrator или фанатеет по Corel.
    Ответ написан
    Комментировать
  • Как реализовать анимацию при скроллинге?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Делал когда-то вот тут. Там вообще к скроллу привязано куча анимаций. Исходник js открыт, можно смотреть.
    Ответ написан
    Комментировать
  • Есть ли смысл при вёрстке всем элементам прописывать box-sizing: border-box?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Использование данного решения - вопрос привычки. Мозг начинает по-другому считать, к этом надо привыкнуть. Назад к "классической" модели возвращаться не захочется) Использовать ли? Мой выбор - да. Упрощает жизнь, ибо логичнее и понятнее. Поддержка во всех современных браузерах есть. Для старых (включая IE) есть полифил, или же старым вообще выдавать упрощенную версию.
    Ответ написан
    Комментировать
  • Где найти талантливого верстальщика мечтающего освоить или владеющего Responsive Web Design - версткой?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Если речь не только о бесплатных развлечениях, но и адекватных коммерческих заказах, к которым нужно подходить с душой и трепетом, а в перерывах делать бесплатные полезности для комьюнити (читать - публикации на Хабре и в других местах скопления коллег и сочувствующих) - я в деле.
    Ответ написан
  • Как удалить лишние селекторы CSS?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    www.cleancss.com
    https://github.com/peterbe/mincss
    Лично я предпочитаю эту процедуру, как и многие другие в процессе работы, выполнять с помощью волшебного Grunt - https://github.com/addyosmani/grunt-uncss
    Ответ написан
    7 комментариев