7 вещей, которые умеет CSS и о которых вы не знали

Дата публикации: 2014-06-02

От автора: CSS и JavaScript, хотите – верьте, хотите — нет, стали пересекаться друг с другом, по мере того как у CSS появляются новые возможности. Когда я писал статью 5 способов взаимодействия CSS и JavaScript, о которых вы не знали, люди были удивлены тем, как CSS и JavaScript могут пересекаться. Сегодня я выделю семь задач, которые можно выполнить на CSS, без привлечения изображений или JavaScript.

CSS @supports

Любой хороший фронт-энд разработчик тестирует поддержку браузером определенных возможностей до их применения. Тестирование поддержки всегда осуществлялось с помощью JavaScript, и многие использовали Modernizr, впечатляющий набор утилит со множеством функционала для тестирования возможностей браузера. Однако, появился новый API для того, чтобы тестировать возможности браузера с помощью CSS: @supports. Здесь можно увидеть несколько примеров того, как работает @supports:

/* базовое использование */
@supports(prop:value) {
	/* more styles */
}

/* настоящее использование */
@supports (display: flex) {
	div { display: flex; }
}

/* также тестируются префиксы */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
    	display: flex;
    	float: none;
    }
}

/* базовое использование */

@supports(prop:value) {

/* more styles */

}

/* настоящее использование */

@supports (display: flex) {

div { display: flex; }

}

/* также тестируются префиксы */

@supports (display: -webkit-flex) or

(display: -moz-flex) or

(display: flex) {

section {

display: -webkit-flex;

display: -moz-flex;

display: flex;

float: none;

}

Новая возможность @supports, которая также имеет аналог на JavaScript, появилась уже давно и мы с нетерпением ждем повода ее использовать!

CSS Filters

Напишите сервис для изменения оттенков изображения и вы можете продать его Фейсбуку за миллиард долларов! Конечно же, это упрощение, но написание фильтров для изображения – это не ракетостроение. Я написал крошечное приложение во время первой недели работы в Mozilla (которое победило в конкусре, это к слову), которое использовало математику в JavaScript для того, чтобы создавать фильтры для изображений с помощью canvas, но сегодня мы можем создавать фильтры для изображений только лишь на CSS!

/* простой фильтр */
.myElement {
	-webkit-filter: blur(2px);
}

/* сложный фильтр */
.myElement {
	-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

/* простой фильтр */

.myElement {

-webkit-filter: blur(2px);

}

/* сложный фильтр */

.myElement {

-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);

}

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

Посмотреть демо

Указатели событий и блокировка кликов

Свойство CSS pointer-events предоставляет метод для эффективного отключения элемента, таким образом, что клик по ссылке не вызывает событие JavaScript:

/* ничего не делать по клику или активации */
.disabled { pointer-events: none; }
/* это _не_ сработает из-за pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {
	alert("Clicked!");
});

/* ничего не делать по клику или активации */

.disabled { pointer-events: none; }

/* это _не_ сработает из-за pointer-events: none application */

document.getElementById("disabled-element").addEventListener("click", function(e) {

alert("Clicked!");

});

В примере выше, событие клика даже не будет вызвано, благодаря значению CSS pointer-events. Я нахожу это чрезмерно полезным, т.к. вам не нужно везде делать проверки по названию класса или атрибуту для того, чтобы убедиться, что что-то отключено.

Посмотреть демо

Выезд вниз и вверх

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

/* слайдер в открытом состоянии */
.slider {
	overflow-y: hidden;
	max-height: 500px; /* приблизительная максимальная высота */

	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

/* закрываем с помощью класса "closed" */
.slider.closed {
	max-height: 0;
}

/* слайдер в открытом состоянии */

.slider {

overflow-y: hidden;

max-height: 500px; /* приблизительная максимальная высота */

transition-property: all;

transition-duration: .5s;

transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

}

/* закрываем с помощью класса "closed" */

.slider.closed {

max-height: 0;

}

Мудрое использование свойства max-height позволяет элементу увеличиваться, и уменьшатся при необходимости.

Посмотреть демо

Счетчики на CSS

У нас часто возникает недопонимание по поводу того, что означает слово «счетчик» в интернете, на счетчики на CSS – это нечто совсем другое. CSS счетчики позволяют разработчикам увеличивать счетчик и показывать его для данного элемента с помощью :before или :after:

/* инициализация счетчика */
ol.slides {
	counter-reset: slideNum;
}

/* увеличение значения счетчика */
ol.slides > li {
	counter-increment: slideNum;
}

/* показ значения счетчика */
ol.slides li:after {
	content: "[" counter(slideNum) "]";
}

/* инициализация счетчика */

ol.slides {

counter-reset: slideNum;

}

/* увеличение значения счетчика */

ol.slides > li {

counter-increment: slideNum;

}

/* показ значения счетчика */

ol.slides li:after {

content: "[" counter(slideNum) "]";

}

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

Посмотреть демо

CSS классы в Юникод

Есть множество документов, посвященных лучшей практике CSS, и все они начинаются с именования CSS классов. То, чего вы никогда не увидите в этих документах – это как использовать символы Юникод для именования классов:

.ಠ_ಠ {
	border: 1px solid #f00;
	background: pink;
}

.❤ {
	background: lightgreen;
	border: 1px solid green;
}

.ಠ_ಠ {

border: 1px solid #f00;

background: pink;

}

.❤ {

background: lightgreen;

border: 1px solid green;

}

Пожалуй, не стоит использовать их. Но вы можете, теоретически.

Посмотреть демо

Круги на CSS

CSS треугольники – это интересная техника, также как и круги на CSS. Используя border-radius не совсем по назначению, вы можете создавать безупречные круги!

.circle {
	border-radius: 50%;
	width: 200px;
	height: 200px; 
	/* ширина и высота могут быть любыми, но одинаковыми */
}

.circle {

border-radius: 50%;

width: 200px;

height: 200px;

/* ширина и высота могут быть любыми, но одинаковыми */

}

Вы можете добавлять градиенты вашим кругам и даже использовать CSS анимации, чтобы поворачивать их! У CSS вскоре появится более формализованное API для создания Фигур, но вы можете создавать круги уже сейчас!

Посмотреть демо