Верстка \ CSS 3

Полное руководство по свойствам размеров Flexbox

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

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

Верстка \ CSS 3

CSS Hyphenation - перенос слов в 2019 году

От автора: недавно я работал над веб-сайтом, который использовал большие заголовки (имеется в виду размер шрифта), а также был доступен на немецком языке. Это означает, что часто на нем встречались довольно длинные слова, и они часто не помещались в контейнер. Если ничего не делать, это «сломало бы» макет, так как появилась бы горизонтальная полоса прокрутки. Итак, я перечитал статью, которую написал почти четыре года назад о работе с длинными словами и реализовал окончательное решение.

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

Верстка \ CSS 3

Липкое позиционирование блоков (position sticky)

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

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

Верстка \ CSS 3

Быстрая проверка CSS и общие замечания о системах дизайна

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

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

Верстка \ CSS 3

Градиентные рамки в CSS

От автора: допустим, вам нужна градиентная рамка CSS вокруг элемента. Я представляю себе это так: для этого не существует простого очевидного CSS API; я просто создам элемент-оболочку с linear-gradient фоном, а затем внутренний элемент перекроет большую часть этого фона, за исключением тонкой линии вокруг него.

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

Верстка \ CSS 3

Свойство visibility — это не только видимость

От автора: недавно я столкнулся с проблемой, когда текст, содержащийся в созданной мною button, отсутствовал в дереве доступности и, следовательно, не был доступен для программ чтения с экрана. После некоторой отладки я понял, причина в том, что я визуально анимировал текст, изменяя прозрачность и, что более важно, свойство HTML visibility.

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

Верстка \ CSS 3

Как начать работать с переменными шрифтами в CSS: основы использования

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

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

Верстка \ CSS 3

Все о переменных среды CSS

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

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