Немного про CSS и вёрстку

12.04.2017, 22:24 Вёрстка CSS

Сегодня несколько интересных статей от css-tricks, csswizardry и uxdesign.cc.

• background-repeat;
• Проблемы с производительностью base64 для картинок;
• Краткая запись CSS как антипаттерн;
• О стилях для печати.

background-repeat

Ничего сверхъестественного, просто качественная статья о том, как можно использовать CSS-свойство “background-repeat”. Про “round” и “space” не слышал, а они поддерживаются аж с IE9 (и нормальными браузерами).

Проблемы с производительностью base64 для картинок

Это две статьи:

• Base64 Encoding & Performance, Part 1: What’s Up with Base64?
  
• Base64 Encoding & Performance, Part 2: Gathering Data — в этой части приводятся тесты и дополнительные выводы.

Согласен с автором — использование base64 чаще всего не оправдано (если это не пара-другая мелких картинок). Запихнув картинки в стили, мы получаем: блокировку отрисовки, отсутствие кэширования отдельных картинок, более длительный парсинг стилей.

Ещё узнал, что можно делать так (чтобы грузить картинки параллельно с загрузкой CSS):

<link rel="preload" href="masthead.jpg" as="image" />

Краткая запись CSS как антипаттерн

Статья-предостережение о том, что не стоит увлекаться записями вида background: red;. Есть и оригинал и перевод:

• CSS Shorthand Syntax Considered an Anti-Pattern.
• Краткая запись CSS как антипаттерн.

О стилях для печати

Напоминание о том, что они есть и несколько полезных техник. Аналогично, оригинал и перевод:

• I totally forgot about print style sheets.
• Я совсем забыл о стилях для печати.

12.04.2017, 22:24 Вёрстка CSS