12 современных приемов CSS для решения старых проблем CSS

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

Однако по мере развития веб-технологий разработчики стремятся понять, как справиться и с другими проблемами. Например, использовать другие библиотеки для оптимизации времени загрузки сайта с высокой нагрузкой или сделать теги div более отзывчивыми, не особо полагаясь на Bootstrap. С развитием и увеличением количества задач развивается и CSS.

В этом продвинутом учебнике по CSS мы обсудим 12 современных техник CSS, чтобы преодолеть старые проблемы, которые возникли с CSS.

Давайте начнем с современных техник CSS!

Новичок в селекторах CSS? Ознакомьтесь с этой шпаргалкой Ultimate CSS Selector, и вы сможете продвинуться в веб-дизайне.

1. Продвинутые селекторы CSS

Понимание того, как работают селекторы CSS, необходимо, если вы планируете создать многоразовый CSS-файл, который можно использовать для других страниц или компонентов пользовательского интерфейса. Если вы ищете ценный ресурс, содержащий подробную информацию о селекторах CSS, ознакомьтесь с The Ultimate CSS Selectors Cheat Sheet.

Возможно, вы уже знакомы с селекторами на основе классов, ID и элементов. Давайте рассмотрим некоторые продвинутые селекторы.

Привет, вы ищете Next.js Testing — облако автоматизированного тестирования, которое масштабируется по мере расширения. Выполняйте тесты автоматизации в масштабе вашего сайта Next.js на самом надежном облаке автоматизации тестирования.

Универсальный селектор

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

* {
  margin: 1.5rem;
}

Селектор атрибутов

Что если вы хотите применить определенный стиль к некоторым элементам, имеющим одинаковые атрибуты, но разные имена классов? Вы можете использовать селекторы атрибутов.

[class*="component_"] {
  border: 2px solid blue;
}

Селектор атрибутов применит рамку к элементам с именами классов «component_title» и «component_label».

Комбинатор дочерних элементов

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

.navigation-menu > ul > li > a {
  font-weight: bold;
}

Псевдоклассы

Видели ли вы таблицу с чередующимися строками разного цвета? Интересно, как это можно сделать с помощью всего нескольких строк CSS? Ответ — псевдоклассы. Давайте посмотрим на код.

tbody tr:nth-child(odd) {
  background-color: green;
}

Это применит зеленый фон к нечетным строкам таблицы.

Вместо «odd» или «even» можно также использовать свойства типа «n+1» или «3n+1», чтобы применить разные свойства к разным строкам.

2. Замена старой системы сеток

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

Современные техники CSS, такие как grid, дали нам упрощенное решение. Давайте узнаем, как это сделать.

$minColumnWidth: 10rem;
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
  grid-gap: 2rem;

& + .grid {
    margin-top: $gridGap;
  }
}

Итак, что мы сделали?

Во-первых, мы определили минимальную ширину для элементов сетки.

В grid-template-columns мы использовали функцию repeat, чтобы CSS применял одни и те же параметры к каждому столбцу. Кроме того, мы использовали функцию auto-fit вместо числа. Причина в том, что столбцы теперь будут иметь одинаковую ширину, независимо от того, сколько столбцов вы используете, они будут растягиваться и заполнять доступное пространство.

Мы также использовали функцию minmax() для установки максимальной ширины для каждой колонки и оставили 1фр в качестве максимального значения. Это гарантирует, что содержимое заполнит столбец до всего доступного пространства.

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

Результат?

Есть только один недостаток. При количестве колонок более трех в некоторых видовых экранах может появиться «сиротливая» колонка.

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

3. Поддержание равномерной высоты элементов

Было время, когда мы использовали jQuery для расчета, чтобы убедиться, что высота контейнеров одинакова. Это происходило, когда содержимое двух контейнеров не было одинаковым, но мы хотели сделать их высоту одинаковой для улучшения UX.

Но как современные методы CSS упростили этот процесс? Ну, с помощью системы сеток.

/*Parent container*/
.parent {
  display: grid;
  grid-auto-flow: column;
}
/*Child elements*/
.child {
    height: 100%;
  }

Переключив автопоток сетки на строку или столбец, мы можем получить контейнеры одинаковой ширины или высоты.

Мы также можем использовать ту же функциональность с более простым кодом, используя CSS flexbox.

/*Parent elements*/
.parent {
  display: flex;

/* Child elements */
  .child {
    height: 100%;
  }
}

Итак, что же лучше? Ответ таков: оба имеют равную долю преимуществ в использовании. Если вам нужно решение для простого решения проблемы элементов с одинаковой высотой, то flexbox — лучший вариант. Однако в flexbox элементы могут быть не одинаковой ширины.

Grid, однако, может работать с элементами равной ширины, если это то, что вам нужно. Кроме того, если вы хотите иметь максимальное количество столбцов в каждой строке, сетка может справиться с этой задачей. Но если вы используете flexbox, вам нужно определить расчет для этой цели.

4. Улучшение пользовательского опыта плавной прокрутки

В настоящее время ссылки «назад к началу» не так часто используются, но было время, когда это было модно. Идея заключалась в создании ссылки, которая позволяла пользователю прокручивать страницу назад в верхней части сайта. Давайте узнаем, как разработать ссылки «назад-вверх», используя современные методы CSS.

Сначала создадим контент.

<header id="header">Title</header>
<main>
  <article>
    <!-- content goes here -->
  </article>
  <!-- Back to Top link -->
  <div class="back-to-top-wrapper">
    <a href="#header" class="back-to-top-link" aria-label="Go Back to Top">Top</a>
  </div>
</main>

Сначала мы добавим плавную прокрутку на нашу страницу.

html {
    scroll-behavior: smooth;
  }

Затем мы оформим ссылку «назад-вверх» в соответствии с нашими предпочтениями. Вы также можете добавить красивый SVG-значок вместо ручной стилизации.

Теперь пришло время выбрать, как будет вести себя прокрутка. Определите длину прокрутки.

$scrollLength: 100vh;

Далее в обертке установите значение прокрутки на предопределенную длину прокрутки.

.back-to-top-wrapper {
  position: absolute;
  top: $scrollLength;
}

Добавьте необходимые стили к ссылке «Назад к началу». Не забудьте использовать position-sticky, чтобы сохранить ее в определенном положении.

.back-to-top-link {
  // using 'fixed' as fallback when `sticky` not supported
  position: fixed;
  position: sticky;
  // achieves desired positioning within the viewport
  // relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used
  top: calc(100vh - 5rem);
  // ... other styles
}

Готово, мы получили желаемый результат.

5. Улучшение доступности сайта путем добавления альтернативы: focus

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

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

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

Вы можете добавить —

button:focus {
  outline: max(1px, 0.1em) solid currentColor;
  outline-offset: 0.25em;
}

Здесь мы рассматриваем currentColor как цвет темы вашей страницы. В вашем случае это зеленый цвет.

Используя outline-offset, мы можем настроить расстояние контура от элемента.

Там, разве сфокусированный контур не совпадает с цветом кнопки? Вам также следует ознакомиться с лучшими инструментами для тестирования доступности.

6. Правила шрифтов CSS и создание плавной шкалы типографики

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

Рекомендуемые шрифтовые единицы

Запутались, что использовать? %, rem, em или px? Первое, что вам нужно сделать при определении типографики, — забыть о px. Он не масштабируется пропорционально, когда пользователь увеличивает или уменьшает масштаб в браузере. Рекомендуемая единица измерения — рема.

По умолчанию 1 rem равен 16 px, и размеры шрифта, определенные в rem, остаются неизменными при изменении масштаба браузера.
em пропорционален правилу размера шрифта ближайшего предка элемента. Его можно использовать только в том случае, если вы хотите, чтобы поведение дочернего элемента было интервальным по отношению к родительскому элементу.

% имеет почти такое же поведение, как и em. Однако, когда вам нужен относительный размер, em более предпочтителен.

Ознакомьтесь с тестами Nikola Testing — тестирование ваших сайтов на основе CSS-фреймворка Nikola в 3000+ различных настольных и мобильных браузерах.

Предотвращение переполнения текста

Предотвращение переполнения текста — это хороший способ защитить свой сайт на будущее. Оно гарантирует, что если в будущем текст в контейнере увеличится, он не выйдет за пределы контейнера или его границы.

p,
li,
h1,
h2,
h3,
h4 {
  // Help prevent overflow of long words/names/URLs
  word-break: break-word;
}

Отзывчивая типографика

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

font-size: unquote("min(max(#{$fluid-min}rem, #{$fluid-scaler}), #{$level-size})");

Или вы можете использовать vw (ширина области просмотра) в качестве единицы измерения шрифта.

Помимо отзывчивой типографики, вы можете протестировать веб-дизайн на отзывчивость с помощью LT Browser.

LT Browser — инструмент тестирования отзывчивости, позволяющий тестировать веб-сайты на отзывчивость в 50+ предварительно созданных экранах просмотра устройств.

LT Browser оснащен такими удивительными функциями, как синхронизация устройств параллельно в нескольких видовых экранах для лучшего отображения медиаконтента и объектов. Функция сетевого дросселирования поможет вам протестировать веб-сайты в различных сетевых условиях от низких до высоких параметров, таких как онлайн, медленный 3G, быстрый 3G и даже офлайн.

LT Browser оснащен всеми необходимыми инструментами и функциями, которые нужны разработчикам и дизайнерам в их ежедневном рабочем процессе. Чтобы узнать больше о возможностях LT Browser, вы можете обратиться к нашему блогу: 11 причин, по которым разработчики должны использовать LT Browser.

Приведенная ниже видеоинструкция поможет вам начать работу с LT Browser!

7. Стилизация радиокнопок

Разработчикам необходимы радиокнопки с индивидуальным стилем, поскольку стандартная радиокнопка HTML выглядит по-разному в разных браузерах. Ниже показано, как радиокнопки выглядят в Firefox на Mac.

А вот как они выглядят в Safari.

Кроме того, стандартные радиокнопки не могут масштабироваться в зависимости от размера шрифта.

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

Сначала начнем с HTML.

<label class="radio radio-gradient">
  <span class="radio-input">
    <input type="radio" name="radio">
    <span class="radio-control"></span>
  </span>
  <span class="radio-label">Option 1</span>
</label>
<label class="radio radio-before">
  <span class="radio-input">
    <input type="radio" name="radio">
    <span class="radio-control"></span>
  </span>
  <span class="radio-label">Option 2</span>
</label>

Теперь перейдем к CSS. Мы используем SCSS для легкого создания темы радиокнопок.

Сначала мы создадим пользовательскую переменную цвета.

:root {
  --color: green;
}

Далее мы используем универсальный селектор для сброса метода изменения размера коробки. Он будет учитывать border и padding при расчете окончательного размера любого элемента.

*,
*:before,
*:after {
  box-sizing: border-box;
}

Мы добавили класс .radio к меткам. Мы используем grid-gap, чтобы добавить некоторое расстояние между кнопкой и метками. Мы также будем использовать :focus-within и transform, чтобы размер метки увеличивался, когда в фокусе находится конкретная опция.

.radio {
  display: grid;
  grid-template-columns: min-content auto;
  grid-gap: 0.5em;
  font-size: 2.25rem;
  color: var(--color);

&:focus-within {
    .radio-label {
      transform: scale(1.05);
      opacity: 1;
    }
  }
}

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

.radio-label {
  line-height: 1;
  transition: 180ms all ease-in-out;
  opacity: 0.8;
}

Мы добавим к кнопке display-flex, который обернет пользовательский элемент управления и встроенный ввод.

Мы также используем двойную бокс-тень на сфокусированной сцене и обеспечим различие между базовой кнопкой и сфокусированной сценой.

.radio-input {
  display: flex;

input {
    opacity: 0;
    width: 0;
    height: 0;

&:focus + .radio-control {
      box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
    }
  }
}

Добавление стиля, когда кнопка находится на стадии checked.

.radio-gradient input:checked + .radio-control {
  background: radial-gradient(currentcolor 50%, rgba(255, 0, 0, 0) 51%);
}

Создание элемента :before, чтобы анимировать кнопку, когда она не отмечена.

.radio-before {
  .radio-control {
    display: grid;
    place-items: center;
  }

input + .radio-control::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    box-shadow: inset 0.5em 0.5em currentColor;
    border-radius: 50%;
    transition: 180ms transform ease-in-out;
    transform: scale(0);
  }
  input:checked + .radio-control::before {
    transform: scale(1);
  }
}

Наконец, добавляем стиль к радиокнопке и телу.

.radio-control {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 0.1em solid currentColor;
  transform: translateY(-0.05em);
}
body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-gap: 2rem;
  padding: 1rem;
}

Вот результат.

8. Поддержание нижнего положения нижнего колонтитула

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

Мы можем избавиться от этой проблемы с помощью двух методов.

Сетка

Давайте посмотрим на код.

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Здесь мы сохранили минимальную высоту тела. После этого мы использовали метод grid-template-rows для правильного размещения контента. Метод использует дробную единицу, которая вычисляет доступное пространство и распределяет его на несколько строк. Таким образом, он заполнит все доступное пространство между верхним и нижним колонтитулами.

Flexbox

При использовании flexbox метод более прост.

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

Прежде всего, с помощью min-height мы гарантируем, что тело растянется на всю высоту экрана. Затем, задавая flex-направление, мы сохраняем сложенные блочные элементы и поддерживаем нормальное поведение документа.

9. Анимированные изображения

Когда CSS не был сильно модернизирован, пользователям было трудно анимировать подписи и размер изображений с помощью jQuery и position:absolute.

Однако сегодня с помощью нескольких строк кода мы можем анимировать подписи и запускать анимацию при наведении на изображение. Давайте посмотрим на код.

.image-caption {
  // ... existing styles
  transition: transform 500ms ease-in;
  will-change: transform;
}
The transition property helps to animate the caption. We can trigger the animation on hover using - 
.image:hover {
  .image-caption {
    transform: translateY(0);
  }
}

Это решает проблему с наведением мыши. Но что если кто-то использует клавиатуру для навигации по веб-странице? В этом случае мы можем использовать focus вместо hover.

.image:focus {
  outline: none;
}
.image:hover,
.image:focus {
.image-caption {
    transform: translateY(0);
}

10. Расширенное использование радиуса границы и тени коробки

Сегодня разработчикам не нужно возиться с созданием закругленных углов для контейнеров, которые они хотят сделать закругленными. Благодаря свойству border-radius, которое подарил нам CSS3. Например —

border-radius: 20% 50%;

Я знаю, это странная форма. Но это было сделано для демонстрации использования border-radius; если применить вычисленные значения, можно придать контейнеру любую форму. Например —

border-radius: 3vw 4vw 8vw 2vw;

Мы можем использовать процентные значения, которые относятся к размеру элемента. Относительные единицы, такие как vw (viewport units), полезны, если вы хотите сохранить последовательность. Они кажутся меньше на мобильных устройствах и больше на настольных, но сохраняют постоянную круглую форму.

Еще одно интересное свойство, которое помогает нам добавить приятный и успокаивающий пользовательский опыт элементам нашей страницы, — это box-shadow. Обычно мы используем box-shadow, чтобы добавить намек на возвышенность таким элементам, как карточки или кнопки. Например —

box-shadow:3px 4px 5px 0px rgba(0, 0, 0, 0, 0.38);

Здесь мы имеем горизонтальное смещение 3px и вертикальное смещение 4px. Радиус размытия составляет 5px, радиус распространения отсутствует, а тень серого цвета. Вы можете настроить значения по своему усмотрению, чтобы улучшить внешний вид коробки.

Уникальной особенностью box-shadow является то, что вы можете добавить несколько слоев. Например.

box-shadow: 2px 4px 0 4px желто-зеленый, 4px 8px 0 8px желтый, 8px 10px 0 12px красный;

Также у нас есть интересный хак для изображений. Интересно, как добавить эффект виньетки к изображению с помощью box-shadow? Ответ — с помощью вставных теней.

.image-container {
  width: 30vmin;
  height: 30vmin;
  box-shadow: inset 0 0 4vmin 3vmin rgba(0, 0, 0, 0.5);
}

11. Удержание элементов по центру

Раньше, если нам нужно было сохранить элемент в центре страницы, мы должны были использовать абсолютные позиции и определять значения left, right, top и bottom. Эти времена ушли в прошлое. Современные методы CSS предоставляют нам простое решение, которое помогает поддерживать центрированное положение в различных разрешениях.

Чтобы сохранить горизонтальное и вертикальное центрирование элемента, нужно добавить к нему всего два свойства.

display: grid;
place-content: center;

Если вы хотите использовать flexbox для поддержания согласованности между другими flexbox-элементами на странице, вам понадобится дополнительная строка.

display: flex;
align-items: center;
justify-content: center;

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

align-content:center;

Вот результат.

С другой стороны, для выравнивания элемента по горизонтали вместо align-content нужно использовать justify-content.

justify-content:center;

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

Для вертикального выравнивания нужно написать -.

justify-content: center;
flex-direction: column;
For horizontal alignment, you will need - 
justify-content: center;

12. Рисование фигур с помощью CSS

Современные методы CSS избавляют нас от необходимости использовать скрипты для рисования объектов. Теперь у нас есть довольно много полезных методов для создания основных CSS-фигур. Давайте узнаем, как создавать треугольники CSS.

Использование границ

Использование свойства border может помочь нам в создании треугольников. Давайте сначала начнем с контейнера.

.triangle {
  border-style: solid;
  border-color: transparent;
}

Теперь воспользуемся свойством border-width и зададим цвет левой части границы.

.triangle {
  border-style: solid;
  border-color: transparent;
  /* top | right | bottom | left */
  border-width: 7px 0 7px 10px;
  border-left-color: blue;
}

Результат показан ниже.

Мы можем менять местами верхнее, правое, нижнее и левое значения border-width, чтобы изменить ориентацию треугольника.

Использование линейного градиента

Мы можем использовать это свойство вместе со свойством background-image.

Прежде всего, создадим контейнер, зададим размеры и запретим background-repeat.

.triangle {
  width: 8em;
  height: 10em;
  background-repeat: no-repeat;
}

Теперь добавим наши градиенты. Они придадут голубой цвет половине контейнера.

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

background-image: linear-gradient(32deg, blue 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, blue 50%, rgba(255, 255, 255, 0) 50%);

Теперь попробуем сделать так, чтобы коробка выглядела как треугольник. Мы изменим размер фона. Наш треугольник будет иметь 100% ширины, но только половину высоты.

background-size: 100% 50%;

Наконец, чтобы предотвратить наложение, мы должны добавить позицию фона, так как по умолчанию позиция обоих градиентов равна 0 0.

background-position: top left, bottom left;

Итак, наша фигура наконец-то выглядит как треугольник. Однако у этого метода есть и обратная сторона. Форма не является отзывчивой. Если соотношение сторон изменится, нам, возможно, придется пересчитать градусы.

А знаете ли вы о Nuxt Testing — тестировании веб-страниц Nuxt на отзывчивость и совместимость с мобильными устройствами в режиме онлайн. Откажитесь от собственных лабораторий устройств в пользу онлайн масштабируемого облака устройств, которое не разорится при увеличении количества тестовых случаев.

Завершаем!

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