Верстка \ CSS 3

Простой CSS-хак для сокращения времени загрузки страницы

От автора: все хотят, чтобы их страница загружалась быстрее. Это также помогает повысить производительность SEO. Давайте посмотрим, как можно уменьшить время загрузки страницы, внеся несколько изменений в CSS.

Продолжить чтение

Верстка \ CSS 3

22 CSS-секрета, которые сделают вас макетным ниндзя

От автора: сегодня я хотел бы рассказать вам о нескольких свойствах, секретах и значениях CSS, которые редко упоминаются в технической литературе, но, на мой взгляд, представляют особый интерес для повышения скорости и качества разработки веб-интерфейсов.

Продолжить чтение

Верстка \ CSS 3

Использование эффективных изображений в CSS с помощью image-set()

От автора: функция CSS image-set() поддерживается в браузерах на основе Chromium с 2012 года и в Safari с версии 6. Недавно поддержка появилась в Firefox 88. Давайте погрузимся в суть вопроса и посмотрим, что можно и чего нельзя делать с image-set().

Продолжить чтение

Верстка \ CSS 3

Пользовательские полосы прокрутки в CSS

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

Продолжить чтение

Верстка \ CSS 3

Давайте узнаем о соотношении сторон в CSS

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

Продолжить чтение

Верстка \ CSS 3

Одинаковые столбцы с помощью Flexbox: это сложнее, чем вы думаете

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

Продолжить чтение

Верстка \ CSS 3

CSS size-adjust для @font-face

От автора: по мере загрузки веб-шрифта теперь вы можете настроить его масштаб, чтобы нормализовать размеры шрифтов документа и предотвратить сдвиг макета при переключении между шрифтами.

Продолжить чтение

Верстка \ CSS 3

Контейнерные запросы CSS: примеры использования и стратегии миграции

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

Продолжить чтение