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

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

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

автор

Перевод выполнила: Валерия Заруцкая

Меня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails.

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, которая также имеет аналог на 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);
}

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

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

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

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

/* ничего не делать по клику или активации */
.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;
}

Мудрое использование свойства 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) "]";
}

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

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

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

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

.ಠ_ಠ {
	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; 
	/* ширина и высота могут быть любыми, но одинаковыми */
}

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

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

Вот и все: семь приемов CSS, которые вас удивят. Несколько очень полезных, несколько – для редких случаев.

Автор: David Walsh

Источник: http://davidwalsh.name/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Саша

    Реально круто!!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree