Научитесь, как улучшить время рендеринга, с техникой критического CSS — Перевод «Extract critical CSS» Милицы Михайлии Браузер должен скачать и распарсить CSS-файл перед тем, как отрисует страницу. Это делает CSS ресурсом, блокирующим рендеринг. Если файл большой или соединение медленное, то запрос стилей может значительно увеличить время отрисовки страницы. Ключевой термин: критический CSS — это метод, который извлекает CSS для контента…

Перевод статьи «Keeping it simple with CSS that scales» Энди Белла Это письменное изложение моего доклада «Не усложняйте масштабируемый CSS», который я впервые прочитал на State of the Browser 2019. Это очень длинная статья, поэтому я записал аудиоверсию: Ссылка на Яндекс.Диск У CSS сегодня очень странное положение в вебе. Явно…

Перевод статьи «Complete Guide to Responsive Images!» Элада Шехтера Отзывчивым можно назвать то изображение, размер которого меняется в зависимости от разрешения экрана. Концепция отзывчивых изображений появилась благодаря необходимости решать такие задачи, как, например, показ разных изображений на разных девайсах. И выражается этот подход в том числе в гибком переключении между…

Перевод статьи «The CSS Mindset» Макса Бёка. Ах да, CSS. Едва ли хоть одна неделя проходит без жарких онлайн-дискуссий. Он слишком простой. Он слишком сложный. Он непредсказуемый. Он устаревший. Питер-Гиффин-борется-с-жалюзи.gif. Я не знаю, почему CSS вызывает такое разнообразие эмоций у разработчиков. Но я догадываюсь, почему иногда эта технология кажется нелогичной…

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

Перевод статьи «Writing CSS Algorithms» Лары Шенк Примечание переводчика: Эта статья — первая из серии, посвящённой CSS-алгоритмам. Если вам не до конца понятно, о чём в статье идёт речь — это не страшно =) Дождитесь перевода других статей по этой теме или прочитайте их в оригинале в блоге Лары Шенк…

Перевод «Tips for making interactive elements accessible on mobile devices» Ире Адеринокун. Web Content Accessibility Guidelines (WCAG) — это набор правил для создания доступных сайтов. Вторая версия была опубликована в 2008 году, еще перед тем, как стало возможно просматривать сайты на мобильных устройствах. Несколько лет назад WCAG был обновлён до…

Перевод «A Timeboxed, Day-by-Day #100DaysOfCode» Ника Сциалли Это слегка самоуверенный учебный план по изучению фронденда за 100 дней. Поскольку он — этот план — охватывает широкий спектр тем, то его можно воспринимать как обзорный. Но он вряд ли подойдёт для глубокого погружения в какую-то отдельную область. …

Следующий шаг в эволюции CSS — Перевод «New CSS Logical Properties!» Элада Шехтера. Интро Большинство из нас, разработчиков, мыслят терминами право-лево и верх-низ. Всё потому что изначально интернет предназначался, главным образом, для загрузки документов, а не для сайтов со сложной структурой, которые мы создаём сегодня. Потому что никто в тот момент не учитывал потребностей многоязычных сайтов.