7 потрясающих новых CSS-методов 2019 года

Опубликовано: 2019-05-01

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

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

1. Первоначальная буква

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

Свойство initial-letter автоматически регулирует как количество строк, необходимых для создания стилизованной буквицы, так и размер шрифта. Initial-letter утверждает следующие значения:

<число> относится к тому, сколько строк занимает буква, в которых отрицательные значения не принимаются;
нормальный полезен, если вы хотите сбросить значение, если оно может быть унаследовано от каскада и к первой букве не применяется эффект масштабирования;
<integer> определяет количество строк, в которых должна располагаться буква, если ее размер задан заранее. Значения должны быть больше нуля, а если значение не указано, значение размера дублируется с точностью до ближайшего положительного целого числа;

Псевдоэлемент ::first-letter pseudo-element можно использовать для выбора символов, которые будут отформатированы как начальные буквы. Псевдоэлемент ::first-letter pseudo-element не выбирает первую букву элемента, который имеет display: inline, но работает только с элементами, которые имеют отображаемое значение block, table-cell, table-caption или list-item. .

[xhtml]
<!ДОКТИП HTML>
<html>
<голова>
<стиль>
п {
семейство шрифтов: Serif;
размер шрифта: 20px;
нижняя граница: -15px;
}
ч1 {
семейство шрифтов: без засечек;
размер шрифта: 3.1em;
черный цвет;
}
тело {
отступ: 10 пикселей;
}
дел {
ширина: 550 пикселей;
высота строки: 25 пикселей;
}
р: первый тип: первая буква {
цвет фона: черный;
белый цвет;
плыть налево;
размер шрифта: 50px;
поле справа: 10px;
поле сверху: 7px;
отступ: 18px;
box-shadow: 0 0 10px -2px черный;
}
</стиль>
</голова>
<тело>
<h1>О начальной букве</h1>
<дел>
<p>Настоящим мастером может быть только тот, кто отдает себя делу всей душой и силами. Поэтому мастерство требует всего от человека"</p>
<p>"Забота о человеке и его судьбе всегда должна составлять главный интерес всех технических усилий. Никогда не забывайте об этом среди ваших диаграмм и уравнений"</p>
</div>
</тело>
</html>
[/xhtml]

Initial letter

2. Вариативные шрифты

Вариативные шрифты представляют собой новый набор функций, определенных как часть спецификации OpenType, и позволяют файлам шрифтов содержать несколько вариантов шрифта в одном файле, называемом вариативным шрифтом. На практике это позволяет получить доступ к переменным, содержащимся в файле шрифта, с помощью только одной ссылки @font-face. Кроме того, вариативные шрифты позволяют выполнять такие функции, как переход стилей шрифта, пользовательские стили шрифта и анимация. Преимущество использования вариативного шрифта заключается в том, что у вас есть доступ ко всему диапазону доступных стилей, насыщенности и ширины.

Вариативные шрифты определяют свои вариации через оси вариаций, и существует 5 стандартных осей:

ital: ось курсива работает по-разному, потому что она включена или отключена, промежуточного значения нет. Значение можно установить с помощью CSS-свойства font-style. Кроме того, ввод шрифта-синтеза: none предотвратит случайное применение браузерами оси вариантов и синтезированного курсива.
wght: контролирует вес шрифта, и значение может быть установлено с помощью CSS-свойства font-weight.
wdth: управляет шириной шрифта, и значение может быть установлено с помощью CSS-свойства font-width. В CSS с использованием свойства font-stretch мы можем установить ширину шрифта с процентными значениями, и если мы указываем значение, которое находится за пределами font- закодированный домен, браузер делает шрифт с ближайшим допустимым значением.
opsz: оптический размер относится к практике изменения оптического размера шрифта, и значение может быть установлено с помощью CSS font-optical-sizing. Значения оптического размера применяются автоматически в зависимости от размера шрифта, но ими можно управлять с помощью вариации шрифта. -settings. При использовании font-optical-sizing допускаются значения auto или none, а при использовании font-variation-settings предоставляется числовое значение.
slnt: управляет наклоном шрифта, и значение может быть установлено с помощью CSS-свойства font-style. Оно является переменным, выражаемым числовым диапазоном, и это позволяет изменять шрифт в любом месте вдоль этой оси.

Использование вариативных шрифтов с @font-face — при использовании вариативных шрифтов в Интернете это включает в себя определение правил @ font-face, которые указывают файлы вариативных шрифтов. Вот 2 ссылки, позволяющие найти вариативные шрифты: axis-praxis.org и v -fonts.com.

[xhtml]
<!ДОКТИП HTML>
<html>
<голова>
<title>О вариативных шрифтах</title>
</голова>
<стиль>
@шрифт-лицо {
семейство шрифтов: «Следующая переменная Avenir»;
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
HTML {
семейство шрифтов: «Avenir Next Variable», без засечек;
}
п {
настройки вариации шрифта: «wght» 630, «wdth» 88;
}
</стиль>
<тело>
<h1>О вариативных шрифтах</h1>
<h2>О вариативных шрифтах</h2>
<р>
«Любой умный дурак может сделать вещи больше и сложнее… Требуется немного гениальности — и много мужества, чтобы двигаться в противоположном направлении».
</p>
</тело>
</html>
[/xhtml]

Variablefonts

3. Логические свойства и значения

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

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

Размер блока – соответствует порядку отображения блоков на странице. В английском и арабском языках они выполняются вертикально, в то время как в любом вертикальном режиме письма они выполняются горизонтально.

[xhtml]
<!ДОКТИП HTML>
<html>
<голова>
<стиль>
HTML {
шрифт: 20 пикселей без засечек;
}
тело {
отступ: 25 пикселей;
цвет фона: светло-желтый;
черный цвет;
}
.коробка {
граница: 4 пикселя, сплошной черный цвет;
радиус границы: 20px;
отступ: 20 пикселей;
поле: 12px;
}
.один {
размер блока: 100 пикселей;
встроенный размер: 200 пикселей;
}
.два {
высота: 100 пикселей;
ширина: 200 пикселей;
}
</стиль>
</голова>
<тело>
</div>
<div ID="контейнер">
<div class="box one">
Мой размер блока составляет 100 пикселей, мой встроенный размер 200 пикселей.
</div>
<div class="box two">
Моя высота 100 пикселей, моя ширина 200 пикселей.
</div>
</div>
</тело>
</html>
[/xhtml]

Logical properties and values

4. Привязка прокрутки

Свойство CSS scroll-snap-type определяет жесткость, с которой точки присоединения применяются к контейнеру прокрутки. Другими словами, оно блокирует область просмотра для определенных элементов или местоположений после того, как пользователь закончил прокрутку. Это отличный способ отображения галерей изображений. . Раньше его можно было использовать с JavaScript, но благодаря новому модулю CSS Scroll Snap эффект можно контролировать в CSS. Привязка прокрутки выполняется путем определения родительского элемента / контейнера и дочерних элементов в контейнере, которые будут привязываться в соответствии с правила, определенные в контейнере. Свойство типа привязки прокрутки является наиболее важным свойством, которое применяется к элементу контейнера. Определяет ось привязки прокрутки x, y, блочную, встроенную или обе, а также строгость привязки прокрутки: нет, близость или обязательная.

[xhtml]
<!ДОКТИП HTML>
<html>
<голова>
<стиль>
HTML, тело, .C {
высота: 50%;
}
.С {
дисплей: гибкий;
выравнивание элементов: по центру;
выравнивание содержимого: пробел между;
flex-flow: колонка теперь раппорт;
семейство шрифтов: arial;
}
.контейнер {
дисплей: гибкий;
гибкий: нет;
переполнение: авто
}
.контейнер.х {
ширина: 70%;
высота: 150 пикселей;
flex-flow: row nowrap;
}
.container.y {
ширина: 256 пикселей;
высота: 256 пикселей;
flex-flow: колонка теперь раппорт;
}
.y.mandatory-scroll-snpping {
тип привязки прокрутки: y обязательный;
}
.x.близость прокрутки {
тип привязки прокрутки: x близость;
}
.контейнер > раздел {
выравнивание текста: по центру;
прокрутка-щелчок-выравнивание: центр;
гибкий: нет;
}
.x.контейнер> div {
высота строки: 128 пикселей;
размер шрифта: 64px;
ширина: 100%;
высота: 128 пикселей;
}
.y.container> div {
высота строки: 256 пикселей;
размер шрифта: 128 пикселей;
ширина: 256 пикселей;
высота: 256 пикселей;
}
.y.container> div: {
высота строки: 1,4;
размер шрифта: 80px;
}
.контейнер > div: {
цвет фона: белый;
}
.контейнер > div: {
цвет фона: белый;
}
</стиль>
</голова>
<тело>
<div class=".C">
<div class="container x required-scroll-snapping" dir="ltr">
<div>Привязка прокрутки</div>
<дел>2</дел>
<дел>3</дел>
<дел>4</дел>
</div>
<div class="container y required-scroll-snapping" dir="ltr">
<div>О привязке Scropp</div>
<дел>2</дел>
<дел>3</дел>
<дел>4</дел>
</div>
</div>
</тело>
</html>
[/xhtml]

Scroll snapping

5. Уровень сетки 2 и подсетка

Спецификация уровня 2 содержит все функции уровня 1 и некоторые новые функции. Уровень 2 спецификации сетки создает функцию вложенной сетки CSS Grid. В следующих строках мы рассмотрим функцию вложенной сетки в том виде, в каком она в настоящее время подробно описана в редакторском черновике сетки уровня 2. Таким образом, вы можете создавать сетки при использовании Опция компоновки сетки, элемент сетки можно преобразовать в контейнер сетки, установив для него display: grid. они не совпадают с дорожками родителя.

[xhtml]
<!ДОКТИП HTML>
<html>
<голова>
<title>Сетка CSS, уровень 2 — вложенная сетка</title>
</голова>
<стиль>
тело {
поле: 20 пикселей;
}
.один {
цвет фона: черный;
белый цвет;
радиус границы: 20px;
отступ: 20 пикселей;
размер шрифта: 120%;
}
.Один {
цвет фона: светло-серый;
}
.СЕТКА {
отображение: сетка;
зазор сетки: 10px;
столбцы сетки-шаблона: 3fr 1.5fr 2fr 1fr 1fr 2fr;
цвет фона: белый;
черный цвет;
поле: 1.5em 0;
}
.А {
заполнение: 0;
зазор сетки: 15px;
сетка-столбец: авто/диапазон 4;
отображение: сетка;
сетка-шаблон-столбцы: 3fr 1.5fr 1.5fr;
}
</стиль>
<тело>
<div класс="СЕТКА">
<div class="один 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="один А">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</тело>
</html>
[/xhtml]

Grid level 2 and subgrid

Поскольку это проект с открытым исходным кодом, вы можете увидеть на GitHub, как развивается работа в группе CSS. Разработка спецификаций браузера и реализация — циклический процесс. Таким образом, вы можете наблюдать за тем, как развивается эта функция подсетки, и за новыми реализациями браузеров.

6. Используйте CSS для проверки поддержки браузера

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

Use CSS to test browser support

@supports CSS позволяет вам указывать объявления, которые зависят от поддержки браузером функций CSS, это называется запросом функции. Это правило может быть написано в начале кода или может быть вложено в любое другое правило условной группы.

[CSS]
@supports (отображение: сетка) {
дел {
отображение: сетка;
}
}
[/css]

7. Улучшения синтаксиса для медиазапросов — уровень 4

Спецификация медиа-запросов уровня 4 содержит некоторые улучшения синтаксиса для выполнения медиа-запросов с использованием функций, которые имеют тип диапазона, например высоту и ширину.

В качестве примера мы используем максимальную функциональность для ширины

[CSS]
@media (максимальная ширина: 20em)
[/css]

Мы можем попробовать ширину между двумя случайными значениями, используя min- и max-

[CSS]
@media (минимальная ширина: 20em) и (максимальная ширина: 35em)
[/css]

Для лучшего понимания в приведенном выше примере мы хотим сказать, что ширина больше или равна 20em и меньше или равна 35em.

Заключение

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