Прижатие футера к низу страницы
Иногда содержимого страницы недостаточно для того, чтобы футер оказался прижатым к низу. Эту проблему легко решить с помощью flex:
<body>
<header>
Header
</header>
<main>
Main
</main>
<footer>
Footer
</footer>
</body>
body {
display: flex;
flex-direction: column;
margin: 0;
font-size: 2.5rem;
min-height: 100dvh;
}
main {
flex: 1; /*or flex: auto;*/
}
Адаптация UI под различные устройства ввода
С помощью медиа-запросов pointer можно улучшить пользовательский интерфейс, адаптируя его под различные устройства ввода (мышь или сенсорный экран):
<button class="btn">Click me</button>
.btn {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
background-color: #bada55;
color: #000000;
}
/* Media query for devices with coarse pointers (e.g., touch screens) */
@media (pointer: coarse) {
.btn {
padding: 20px 30px; /* Větší tlačítko pro snadné stisknutí */
font-size: 1.2rem; /* Větší text, aby byl snadněji čitelný */
}
}
/* Media query for devices with fine pointers (e.g., mouse) */
@media (pointer: fine) {
.btn {
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #007bff;
color: #fff;
}
}
Позиционирование с помощью inset
Свойство inset – это сокращение для определения отступов от краев контейнера.
Оно объединяет в себе свойства top, right, bottom и left, что делает код компактнее и удобнее для чтения:
<div class="container"> <div class="box"></div> </div>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: #f0f0f0;
margin: 2rem auto;
}
.box {
position: absolute;
inset: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: #007bff;
}
Стилизация с помощью :empty
Псевдокласс : empty позволяет стилизовать элемент, если он не содержит дочерних элементов или текста. Это может быть полезно для добавления временного контента, например, текста-заполнителя, когда изображение не загрузилось:
<div class="gallery">
<figure class="image-container">
<img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce" alt="Giraffe in the wild">
</figure>
<figure class="image-container"></figure>
</div>
.gallery {
display: flex;
gap: 1rem;
}
.image-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
width: 300px;
aspect-ratio: 4 / 3;
background-color: #f0f0f0;
overflow: hidden;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container:empty::before {
content: "No Image Available";
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
width: 100%;
height: 100%;
font-size: 1.2rem;
color: #888;
background-color: #ddd;
text-align: center;
}
Применение стилей к группе элементов без повышения специфичности
Псевдокласс : where() – мощный инструмент для применения стилей к группе элементов без повышения специфичности. Он идеально подходит для универсальных стилей, таких как сбросы (reset) или общие стили, которые не должны конфликтовать с более специфичными правилами:
<h1>Main Heading</h1> <h2>Subheading</h2> <p>Some paragraph text.</p>
:where(h1, h2, p) {
margin: 0;
color: #bada55;
font-family: Arial, sans-serif;
text-decoration-line: underline;
text-decoration-style: wavy;
}
h1 {
color: #007bff;
}
Выравнивание цифр font-variant-numeric
Свойство font-variant-numeric позволяет выровнять цифры для улучшения их читаемости в определенных ситуациях (таблицы или финансовые отчеты). В частности, значение tabular-nums заставляет цифры занимать одинаковое пространство по ширине, чтобы они выстраивались в виде аккуратных колонок:
<div class="opening-hours"> <p><span class="day">Mo:</span> 08:00 - 14:00, 15:00 - 22:00</p> <p><span class="day">Tu:</span> 10:00 - 18:00, 19:00 - 21:00</p> <p><span class="day">We:</span> 07:30 - 15:00, 16:00 - 23:00</p> <p><span class="day">Th:</span> 07:00 - 13:00</p> <p><span class="day">Fr:</span> 09:00 - 21:00</p> <p><span class="day">Sa:</span> Closed</p> <p><span class="day">Su:</span> Closed</p> </div> <div class="numbers"> <p class="proportional">1234567890</p> <p class="tabular">1234567890</p> </div>
.opening-hours {
font-variant-numeric: tabular-nums;
}
.day {
display: inline-block;
width: 2.5rem;
font-weight: bold;
}
.proportional {
font-variant-numeric: proportional-nums;
}
.tabular {
font-variant-numeric: tabular-nums;
}
Ограничение текста определенным количеством строк -webkit-line-clamp
Свойство -webkit-line-clamp позволяет ограничить текст определенным количеством строк и добавляет многоточие (…) при превышении этого лимита. Это полезно для управления переполнением текста в карточках, списках или других компонентах с фиксированной высотой:
<div class="container">
<div class="overflow-text">
Crema caffeine, ristretto single shot qui caramelization con panna grounds. To go caffeine medium foam latte dripper eu plunger pot. Mocha kopi-luwak caffeine cappuccino cup strong, medium and java aged pumpkin spice body. Roast brewed extra black aroma beans robust.
</div>
</div>
.container {
max-width: 20rem;
}
.overflow-text {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
Применение трансформаций по отдельности
Новые свойства трансформации scale, rotate, translate и другие, позволяют применять трансформации по отдельности, вместо того чтобы комбинировать все их в одно свойство transform. Это улучшает читаемость и упрощает поддержку кода, так как каждая трансформация теперь задается отдельно:
<div class="wrapper"> <p class="transformed">Independent Transform Example</p> </div>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 20rem;
height: 20rem;
}
.transformed {
scale: 1.5; /* Scales the element by 1.5 times */
rotate: 45deg; /* Rotates the element by 45 degrees */
translate: 10px 20px; /* Moves the element 10px to the right and 20px down */
}
/* Old way
.transformed {
transform: translate(10px, 20px) rotate(45deg) scale(1.5);
}
*/
Стилизация с помощью :has()
Псевдокласс : has() позволяет стилизовать родительский элемент в зависимости от того, содержит ли он определенного потомка. Это позволяет создавать более динамичные и интерактивные стили, чего раньше было сложно достичь с помощью стандартных CSS-селекторов:
<div class="card"> <img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce" alt="A sample image" width="300" height="200"> <p>Card with an image</p> </div> <div class="card"> <p>Card without an image</p> </div>
.card:has(img) {
padding: 10px;
max-width: 320px;
border: 2px solid #007bff;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
Использование системной цветовой схемы
Системные цвета – это специальные цвета, которые соответствуют цветовой схеме операционной системы или браузера пользователя. Использование системных цветов позволяет вашему сайту автоматически адаптироваться под предпочтения пользователя (темная или светлая тема):
<button class="btn">System Color Button</button>
body {
background-color: Canvas; /* System color for the background (usually white or black depending on the system theme) */
color: CanvasText; /* System color for regular text */
}
.btn {
background-color: ButtonFace; /* System color for button background */
color: ButtonText; /* System color for button text */
border: 1px solid ButtonBorder; /* System color for button border */
padding: 10px 20px;
cursor: pointer;
}
Стилизaция элементов в зависимости от размера их контейнера
Container Queries позволяют стилизовать элементы в зависимости от размера их контейнера, а не только от размера вьюпорта (окна браузера). Это позволяет создавать более гибкие и контекстно-зависимые адаптивные дизайны, ориентированные на компоненты:
<div class="card-container">
<div class="card">
<h2>Card Title</h2>
<p>This is some content inside the card.</p>
</div>
</div>
.card-container {
container-type: inline-size;
padding: 4rem;
}
.card {
padding: 1rem;
background-color: #f0f0f0;
}
@container (min-width: 640px) {
.card {
background-color: #007bff;
color: #fff;
}
}
Изменение акцентного цвета для элементов форм
Свойство accent-color позволяет легко менять основной цвет встроенных элементов формы – чекбоксов, радиокнопок и диапазонов (<input type=»checkbox»>, <input type=»radio»>, <input type=»range»>). Это упрощает стилизацию и помогает создать визуально согласованные и эстетически привлекательные формы:
<form>
<label>
<input type="checkbox"> I agree to the terms
</label>
</form>
input[type="checkbox"] {
accent-color: #bada55;
}
Адаптивные шрифты
Функция clamp() – мощный инструмент для определения адаптивных размеров шрифта. Она позволяет задать минимальное, предпочтительное, и максимальное значение размера шрифта одновременно, что сделает текст удобочитаемым на любых устройствах:
<main>
<h1>Responsive Font Size with Clamp()</h1>
<p>
This example uses the <code>clamp()</code> function to make the font size responsive.
The heading and paragraph text sizes change depending on the viewport width, while staying within the defined minimum and maximum values.
</p>
</main>
main {
max-width: 800px;
margin: 0 auto;
}
h1 {
font-size: clamp(1.5rem, 5vw, 3rem); /* Min size: 1.5rem, Preferred size based on viewport, Max size: 3rem */
text-align: center;
color: #007bff;
}
p {
font-size: clamp(1rem, 2vw, 1.5rem);
line-height: 1.6;
color: #333;
}
