Новые viewport единицы
Всем известны такие единицы измерения в CSS, как:
vw = 1% от ширины области просмотра
vh = 1% от высоты области просмотра
В то время как единицы vw и vh хорошо работают для десктопа, на мобильных устройствах дело обстоит иначе. Там на размер области просмотра влияет наличие или отсутствие динамических панелей инструментов(адресные строки и панели вкладок).
Поэтому появилась необходимость в ведении новых единиц:
Единицы c префиксом lv(large viewport): lvw, lvh, lvi, lvb, lvmin, lvmax
Единицы c префиксом sv(small viewport): svw, svh, svi, svb, svmin, svmax
На данный момент эти единицы работают в последних версиях браузеров Chrome, Firefox, Safari.
Подробнее о них читайте в статье!
Ссылка
#css
Всем известны такие единицы измерения в CSS, как:
vw = 1% от ширины области просмотра
vh = 1% от высоты области просмотра
В то время как единицы vw и vh хорошо работают для десктопа, на мобильных устройствах дело обстоит иначе. Там на размер области просмотра влияет наличие или отсутствие динамических панелей инструментов(адресные строки и панели вкладок).
Поэтому появилась необходимость в ведении новых единиц:
Единицы c префиксом lv(large viewport): lvw, lvh, lvi, lvb, lvmin, lvmax
Единицы c префиксом sv(small viewport): svw, svh, svi, svb, svmin, svmax
На данный момент эти единицы работают в последних версиях браузеров Chrome, Firefox, Safari.
Подробнее о них читайте в статье!
Ссылка
#css
columns
Разработчики привыкли во всех случаях в верстке использовать flex и grid.
Но в CSS есть не менее мощное свойство columns и иногда даже удобнее воспользоваться им вместо привычных способов.
Например, можно сверстать трех-колоночную структуру и сразу адаптивно без медиа-запросов. Полезно знать о таких возможностях.
Наглядный пример показан в статье!
Ссылка
#css
Разработчики привыкли во всех случаях в верстке использовать flex и grid.
Но в CSS есть не менее мощное свойство columns и иногда даже удобнее воспользоваться им вместо привычных способов.
Например, можно сверстать трех-колоночную структуру и сразу адаптивно без медиа-запросов. Полезно знать о таких возможностях.
Наглядный пример показан в статье!
Ссылка
#css
pure.css
Yahoo! является создателем библиотеки pure.css.
Pure.css - это библиотека для создания интерфейса веб-приложений. Она включает шаблоны оформления для форм, кнопок, таблиц, блоков навигации и прочих UI компонентов.
- Библиотека мало весит и быстро загружается;
- Она включает адаптивную сетку, которая автоматически подстраивается под разные размеры экрана и устройства;
Подробнее о ней читайте в статье!
Ссылка
#css
Yahoo! является создателем библиотеки pure.css.
Pure.css - это библиотека для создания интерфейса веб-приложений. Она включает шаблоны оформления для форм, кнопок, таблиц, блоков навигации и прочих UI компонентов.
- Библиотека мало весит и быстро загружается;
- Она включает адаптивную сетку, которая автоматически подстраивается под разные размеры экрана и устройства;
Подробнее о ней читайте в статье!
Ссылка
#css
Анимация высоты
Свойство height со значением auto невозможно плавно анимировать.
Но теперь высоту элемента можно анимировать с помощью grid свойств!
Ведь не так давно основные браузеры стали поддерживать анимацию свойств grid-template-rows и grid-template-columns.
Пример и подробности в статье.
Ссылка
#css
Свойство height со значением auto невозможно плавно анимировать.
Но теперь высоту элемента можно анимировать с помощью grid свойств!
Ведь не так давно основные браузеры стали поддерживать анимацию свойств grid-template-rows и grid-template-columns.
Пример и подробности в статье.
Ссылка
#css
border
Границы в виде пунктирной линии или точек можно создавать не только с помощью свойства border, но и с помощью свойства background-image и градиентов.
Второй вариант более гибкий, так как позволяет задать длину штриха пунктира, а также расстояние между.
По ссылке представлены примеры создания границ с помощью background-image.
Ссылка
#css
Границы в виде пунктирной линии или точек можно создавать не только с помощью свойства border, но и с помощью свойства background-image и градиентов.
Второй вариант более гибкий, так как позволяет задать длину штриха пунктира, а также расстояние между.
По ссылке представлены примеры создания границ с помощью background-image.
Ссылка
#css
CSS Nesting
CSS Nesting позволяет вкладывать одно правило стиля в другое, такую возможность раньше предоставляли только препроцессоры CSS. Но теперь это доступно и в самом CSS. Пока что выпущена только первая версия и поддерживается последними версиями браузеров Chrome и Safari .
Но очень радует, что такая возможность появилась! Подробнее о синтаксисе CSS Nesting читайте в статье.
Ссылка
#css
CSS Nesting позволяет вкладывать одно правило стиля в другое, такую возможность раньше предоставляли только препроцессоры CSS. Но теперь это доступно и в самом CSS. Пока что выпущена только первая версия и поддерживается последними версиями браузеров Chrome и Safari .
Но очень радует, что такая возможность появилась! Подробнее о синтаксисе CSS Nesting читайте в статье.
Ссылка
#css
@scope
Когда-то в HTML существовал атрибут scoped для элемента style, но он устарел. Атрибут указывает, что стили применяются не ко всему документу, а только к родительскому элементу и его дочерним элементам. Элемент <style> при этом размещается не внутри элемента <head>, а внутри того родительского элемента для которого применяются стили. То есть таким образом, можно было ограничивать области видимости стилей.
Был сделан запрос на возврат данной возможности и тогда был добавлен @scope в CSS. Поддержка браузерами пока ожидается. Но по прогнозам он должен уже появиться в Chrome 117.
А пока интересно почитать, какие проблемы поможет решить данное свойство и посмотреть примеры использования. Все это вы найдете в статье!
Ссылка
#css
Когда-то в HTML существовал атрибут scoped для элемента style, но он устарел. Атрибут указывает, что стили применяются не ко всему документу, а только к родительскому элементу и его дочерним элементам. Элемент <style> при этом размещается не внутри элемента <head>, а внутри того родительского элемента для которого применяются стили. То есть таким образом, можно было ограничивать области видимости стилей.
Был сделан запрос на возврат данной возможности и тогда был добавлен @scope в CSS. Поддержка браузерами пока ожидается. Но по прогнозам он должен уже появиться в Chrome 117.
А пока интересно почитать, какие проблемы поможет решить данное свойство и посмотреть примеры использования. Все это вы найдете в статье!
Ссылка
#css
Мы живем в эпоху своего рода CSS-ренессанса: новые возможности, техники, эксперименты и идеи сыплются на нас в таком количестве, какого мы не видели со времен CSS3.
В то время как сложность CSS кажется постоянной дискуссией, Джефф Грэм рассматривает способы, которыми современный CSS в 2023 году фактически сделал CSS проще в написании.
Подробнее о способах упростить CSS читайте в статье.
Ссылка
#css
В то время как сложность CSS кажется постоянной дискуссией, Джефф Грэм рассматривает способы, которыми современный CSS в 2023 году фактически сделал CSS проще в написании.
Подробнее о способах упростить CSS читайте в статье.
Ссылка
#css
Как писать более чистый CSS: дюжина советов от банальных до неочевидных
Если CSS для вас все еще боль и страдания, добро пожаловать под кат. Мы наткнулись на интересную подборку советов по CSS на английском языке и решили перевести ее, дополнив собственными примерами с кодом.
CSS как технология действительно немного раздут, но не так хаотичен и сложен, как его иногда описывают. Просто нужно стремиться к лаконичности - в том числе, с помощью описанных подходов.
Ссылка
#css
Если CSS для вас все еще боль и страдания, добро пожаловать под кат. Мы наткнулись на интересную подборку советов по CSS на английском языке и решили перевести ее, дополнив собственными примерами с кодом.
CSS как технология действительно немного раздут, но не так хаотичен и сложен, как его иногда описывают. Просто нужно стремиться к лаконичности - в том числе, с помощью описанных подходов.
Ссылка
#css