Перевод «Extract critical CSS» Милицы Михайлии

Браузер должен скачать и распарсить CSS-файл перед тем, как отрисует страницу. Это делает CSS ресурсом, блокирующим рендеринг. Если файл большой или соединение медленное, то запрос стилей может значительно увеличить время отрисовки страницы.

Ключевой термин: критический CSS — это метод, который извлекает CSS для контента «над сгибом» (above the fold — термин из газетного дизайна, прим. редактора), чтобы максимально быстро показать его пользователю.

Перевод статьи «Keeping it simple with CSS that scales» Энди Белла

Это письменное изложение моего доклада «Не усложняйте масштабируемый CSS», который я впервые прочитал на State of the Browser 2019.

Это очень длинная статья, поэтому я записал аудиоверсию:

Ссылка на Яндекс.Диск

У CSS сегодня очень странное положение в вебе. Явно видна поляризация сообщества с мнениями от «CSS отстой» до «CSS рулит, учите матчасть, глупцы».

Я больше склоняюсь к лагерю «CSS рулит» и сейчас я объясню почему: у меня есть теория относительно людей с позицией «CSS отстой». Я предполагаю, что этот лагерь состоит из тех, кто излишне перегружает свой CSS, из…

Перевод статьи «Complete Guide to Responsive Images!» Элада Шехтера

Отзывчивым можно назвать то изображение, размер которого меняется в зависимости от разрешения экрана. Концепция отзывчивых изображений появилась благодаря необходимости решать такие задачи, как, например, показ разных изображений на разных девайсах. И выражается этот подход в том числе в гибком переключении между размерами, типами изображений и прочего. Спецификация отзывчивых изображений была создана только после того, как появился адаптивный дизайн.

Со временем появилось множество способов реализации отзывчивых изображений, расширяя инструментарий фронтенд-разработчиков. Это так же сделало использование отзывчивых изображений довольно сложным. Вот почему я решил погрузится в эту тему только недавно, несмотря на то…

Перевод статьи «The CSS Mindset» Макса Бёка.

Ах да, CSS. Едва ли хоть одна неделя проходит без жарких онлайн-дискуссий. Он слишком простой. Он слишком сложный. Он непредсказуемый. Он устаревший. Питер-Гиффин-борется-с-жалюзи.gif.

Я не знаю, почему CSS вызывает такое разнообразие эмоций у разработчиков. Но я догадываюсь, почему иногда эта технология кажется нелогичной, почему вы чувствуете разочарование: вам нужно мыслить определённым образом, чтобы писать хороший CSS-код.

Безусловно, для написания любого кода требуется определённый образ мышления. Но декларативный характер CSS делает его особенно трудным для осознания. Особенно если вы размышляете в категориях «традиционных» языков программирования.

Другие языки программирования обычно работают в контролируемой среде, например…

Перевод «How @supports Works» Криса Койера.

В CSS существует простой способ, позволяющий проверить браузерную поддержку какого-то свойства или комбинации свойства и значения перед тем, как применять определённый блок стилей. Похоже на то, как работает @media, проверяя ширину окна браузера перед тем, как применить стили. По тому же принципу CSS внутри будет применён, только если пара свойство: значение поддерживается в конкретном браузере. Эта директива называется @supports и выглядит так:

@supports (display: grid) {
    .main {
        display: grid;
    }
}

Почему? Немного сложно объяснить. Лично я считаю, что не стоит постоянно её использовать. В CSS есть естественный механизм фолбэков. Если браузер не…

Перевод статьи «Writing CSS Algorithms» Лары Шенк

Примечание переводчика: Эта статья — первая из серии, посвящённой CSS-алгоритмам. Если вам не до конца понятно, о чём в статье идёт речь — это не страшно =) Дождитесь перевода других статей по этой теме или прочитайте их в оригинале в блоге Лары Шенк по ссылке. Очень советую доклад «Bridging the Design and Development Gap with CSS Algorithms» с WordCamp US 2018.

Чуть раньше на этой неделе я поделилась твитом на тему «артефактов после разработки CSS-алгоритмов». Я была рада быстрому отклику аудитории, но считаю, что подобный материал лучше размещать в виде статьи. Этот пост…

Перевод «Tips for making interactive elements accessible on mobile devices» Ире Адеринокун.

Web Content Accessibility Guidelines (WCAG) — это набор правил для создания доступных сайтов. Вторая версия была опубликована в 2008 году, еще перед тем, как стало возможно просматривать сайты на мобильных устройствах.

Несколько лет назад WCAG был обновлён до версии 2.1, в которую был включен совершенно новый раздел с правилами доступности для мобильных устройств. Среди них есть несколько правил, актуальных только для мобильных. Например, правило 1.3.4, …

Перевод «A Timeboxed, Day-by-Day #100DaysOfCode» Ника Сциалли

Это слегка самоуверенный учебный план по изучению фронденда за 100 дней. Поскольку он — этот план — охватывает широкий спектр тем, то его можно воспринимать как обзорный. Но он вряд ли подойдёт для глубокого погружения в какую-то отдельную область. После того, как вы завершите программу по этому учебному плану, вы получите общее представление о каждой из представленных в ней тем, и в дальнейшем сможете углубиться в любую из них при необходимости.

На создание этого учебного плана меня вдохновила дорожная карта Modern Frontend Developer Кармана Ахмеда. Это великолепно! Обязательно загляните по ссылке.

Примечание: я…