DevGang
Авторизоваться

CSS: Новая функция image

Копаясь в спецификациях w3c, можно выявить множество интересных функций. Хотя некоторые из них еще не поддерживают браузеры, мы, по крайней мере, можем узнать, какие новые функции мы можем ожидать в ближайшее время.

Одна из новых функций - image(). Эта новая функция даст нам больше контроля над загрузкой изображений в CSS. Давайте погрузимся в возможности совершенно новой функции image.

5 новых функций CSS, которые вы можете протестировать прямо сейчас 

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

  1. CSS subgrid
  2. Flexbox gaps
  3. content-visibility
  4. contain-intrinsic-size
  5. И псевдо-классы :is и :where

Веб-анимация с помощью HTML, CSS и JavaScript

Frontend: Подборка интересного за неделю

Ниже представлена подборка из статей, которые будут полезны всем, кто занимается фронтенд-разработкой.

Креативный текст с использованием фигур CSS

Вспоминая, как много лет назад я начинал свою карьеру дизайнера, я помню, как создавал креативные текстовые потоки в Adobe InDesign. Начав как дизайнер печати, я много работал в этой программе верстки. При работе с макетами текст иногда обтекал изображение или «обтекал» форму. В мире печати это называется «переносом текста». Это не тот термин, который используется в Интернете, но такая же идея доступна в стилях CSS.

Используйте расширенную типографику с локальными шрифтами 

Узнайте, как Local Font Access API позволяет получить доступ к локально установленным шрифтам пользователя и получить о них низкоуровневую информацию.

Вертикальное выравнивание текста в кнопках и полях ввода 

Вы когда-нибудь боролись с вертикальным выравниванием содержимого ваших интерактивных элементов? Вы в хорошей компании. Многие из нас так делают.

В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода с помощью line-height, padding и flexbox.

content-visibility: новое свойство CSS, повышающее производительность рендеринга

Свойство content-visibility, запускаемое в Chromium 85, может быть одним из наиболее эффективных новых свойств CSS для повышения производительности загрузки страниц. content-visibility позволяет агенту пользователя пропускать работу по визуализации элемента, включая макет и рисование, до тех пор, пока она не понадобится. Поскольку рендеринг пропускается, если большая часть вашего контента находится за пределами экрана, использование свойства content-visibility значительно ускоряет первоначальную загрузку пользователя. Это также позволяет быстрее взаимодействовать с экранным контентом. Довольно аккуратно.

В нашей демонстрационной статье применение content-visibility: auto к фрагментированным областям содержимого дает прирост производительности рендеринга в 7 раз при начальной загрузке.Читайте дальше, чтобы узнать больше.  
В нашей демонстрационной статье применение content-visibility: auto к фрагментированным областям содержимого дает прирост производительности рендеринга в 7 раз при начальной загрузке.Читайте дальше, чтобы узнать больше.  

Введение в CSS Grid Layout (с примерами) 

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

Но большинство из них обучают вас основам с очень немногими реальными примерами. Итак, в этом руководстве мы рассмотрим примеры по мере изучения.

Использование CSS-масок для создания зубчатых краев

Я работал над проектом, который имел этот аккуратный зазубренный край вдоль нижней части изображения баннера.

Выглядит остро... во многих отношениях
Выглядит остро... во многих отношениях

Каскадные таблицы стилей (CSS) - это язык таблиц стилей, используемый для описания представления документа, написанного на языке разметки. Хотя чаще всего используется для установки визуального стиля веб-страниц и пользовательских интерфейсов, написанных в HTML и XHTML, язык может быть применен к любому XML-документу, включая простой XML, SVG и XUL. Наряду с HTML и JavaScript, CSS - это важная технология, используемая большинством веб-сайтов для создания визуально привлекательных веб-страниц, пользовательских интерфейсов для веб-приложений и пользовательских интерфейсов для многих мобильных приложений.

CSS разработан в первую очередь для обеспечения разделения представления и контента, включая такие аспекты, как макет, цвета и шрифты. Это разделение может улучшить доступность контента, обеспечить большую гибкость и контроль в спецификации характеристик презентации, позволить нескольким страницам HTML делиться форматированием, указывая соответствующий CSS в отдельном файле .css и уменьшая сложность и повторение в структурном контенте.

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В подарок 100$ на счет при регистрации

Получить