Верстка \ CSS 3

Свойство outline-offset

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

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

Верстка \ CSS 3

Как сделать пользовательские свойства (CSS-переменные) более динамичными

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

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

Верстка \ CSS 3

Проблема с препроцессингом пользовательских CSS-свойств

От автора: в CSS появились пользовательские свойства. Последнее время мы о них часто писали. Поддержка в браузерах хорошая, но ее нет и не будет в старых браузерах типа IE. Я так и вижу, насколько хорош будет «будущий CSS», если позволить препроцессорам портировать его на CSS, совместимый со старыми браузерами. Babel для CSS! Почему нет?!

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

Верстка \ CSS 3

Смотрите спецификацию CSS Grid Layout или что написано в шапке спецификации

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

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

Верстка \ CSS 3

Как установить CSS margin и padding

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

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

Верстка \ CSS 3

Пользовательские свойства CSS достигли приемлемой поддержки

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

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

Верстка \ CSS 3

Разные логические способы группировки CSS-свойств

От автора: много я стилей настрочил. Скажу сразу, что своего собственного мнения по поводу сортировки свойств у меня не было. Я просто добавляю, что мне нужно. Я думаю, что мои стили в конечном итоге в значительной степени «группируются» по общим признакам, потому что именно так мой мозг разбил их.

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

Верстка \ CSS 3

Нумерованные списки на символах Юникода

От автора: нумерованные списки – одни из самых старых и семантически богатых элементов в HTML. Когда вам нужно передать последовательность или рейтинг, используйте тег ol. По умолчанию тег ol отображает числа слева от пункта списка. С помощью свойства list-style-type нумерацию можно сменить на римские цифры или буквы алфавита. Любите экзотику, тогда можете взять числа из других культур, например, Иврит или Греция. Полный список доступных значений хорошо задокументирован и прост в использовании.

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