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. .

<!DOCTYPE html>
<html>
<head>
<style>
p {
 font-family: Serif;
 font-size: 20px;
 margin-bottom: -15px;
}
h1 {
 font-family: Sans-serif;
 font-size: 3.1em;
 color: black;
}
body {
 padding: 10px;
}
div {
 width: 550px;
 line-height: 25px;
}
p:first-of-type:first-letter {
 background-color: black;
 color: white;
 float: left;
 font-size: 50px;
 margin-right: 10px;
 margin-top: 7px;
 padding: 18px;
 box-shadow: 0 0 10px -2px black;
}
</style>
</head>
<body>
<h1>About initial letter</h1>
<div>
<p>Only one who devotes himself to a cause with his whole strength and soul can be a true master. For this reason mastery demands all of a person"</p>
<p>"Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equation"</p>
</div>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
<title>About variable fonts</title>
</head>
<style>
@font-face {
  font-family: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
  font-family: 'Avenir Next Variable', sans-serif;
}
p {
  font-variation-settings: 'wght' 630, 'wdth' 88;
}
</style>
<body>
<h1>About variable fonts</h1>
<h2>About variable fonts</h2>
<p>
	"Any intelligent fool can make things bigger and more complex… It takes a touch of genius – and a lot of courage to move in the opposite direction."
</p>
</body>
</html>

Variablefonts

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
html {
  font: 20px Sans-serif;
}
body {
  padding: 25px;
  background-color: lightyellow;
  color: black;
}
.box {
  border: 4px solid black;
  border-radius: 20px;
  padding: 20px;
  margin: 12px;
}
.one {
  block-size: 100px;
  inline-size: 200px;
}
.two {
  height: 100px;
  width: 200px;
}
</style>
</head>
<body>
</div>
<div id="container">
<div class="box one">
  My block-size is 100 pixels, my inline-size 200px.
</div>
<div class="box two">
  My height is 100 pixels, my width 200px.
</div>
</div>
</body>
</html>

Logical properties and values

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

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

<!DOCTYPE html>
<html>
<head>
<style>
html, body, .C {
  height: 50%;
}
.C {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: arial;
}
.container {
  display: flex;
  flex: none;
  overflow: auto
}
.container.x {
  width: 70%;
  height: 150px;
  flex-flow: row nowrap;
}
.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}
.x.container> div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}
.y.container> div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
.y.container>div:{
  line-height: 1.4;
  font-size: 80px;
}
.container >div:{
  background-color: white;
}
.container >div:{
  background-color: white;
}
</style>
</head>
<body>
<div class=".C">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>Scroll Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>About Scropp Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>

Scroll snapping

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

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

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Level 2 - subgrid</title>
</head>
<style>
body {
  margin: 20px;
}
.one {
  background-color: black;
  color: white;
  border-radius: 20px;
  padding: 20px;
  font-size: 120%;
}
.A .one {
  background-color: lightgrey;
}
.GRID {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3fr 1.5fr 2fr 1fr 1fr 2fr;
  background-color: white;
  color: black;
  margin: 1.5em 0;
}
.A {
  padding: 0;
  grid-gap: 15px;
  grid-column: auto / span 4;
  display: grid;
  grid-template-columns: 3fr 1.5fr 1.5fr;
}
</style>
<body>
<div class="GRID">
<div class="one 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="one A">
<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>
</body>
</html>

Grid level 2 and subgrid

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

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

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

Use CSS to test browser support

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

@supports (display: grid) {
  div {
    display: grid;
  }
}

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

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

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

@media (max-width: 20em)

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

@media (min-width: 20em) and (max-width: 35em)

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

Вывод

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