CSS-исключения: делаем скучные макеты мене скучными. Центрируем по вертикали все что угодно
Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор.
Синтаксис
Селектор :not(<Селектор>) { ... }
В качестве селектора могут указываться единичные псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать псевдокласс :not (конструкция :not(:not(...)) запрещена) и псевдоэлементы.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
В данном примере стиль применяется ко всем элементам за исключением того, в параметрах которого установлено type="submit" (кнопка «Отправить»). Результат примера показан на рис. 1.
Рис. 1. Результат использования псевдокласса:not
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
В этом уроке мы рассмотрим CSS-исключения (CSS Exclusions). На первый взгляд CSS-исключения может быть похож на CSS-фигуры (или очертания, CSS Shapes) тем, что в них текст обходит вокруг элемента. Однако технически они для разных целей.
Модуль очерчивает реальную фигуру элемента, но содержимое не будет огибать эту фигуру, если элемент не плавающий. Модуль CSS-исключений, как раз наоборот, специально разработан для этого; позволяя встроенному содержимому огибать не плавающий элемент , независимо от того, как позиционирован элемент - absolute , relative или fixed .
Свойства
Модуль CSS-исключений вводит несколько новых свойств и значений, а именно:
- wrap-flow: задаёт область исключения, а также способ, которым содержимое должно обтекать его.
- wrap-margin: говорит сам за себя, устанавливает границу или отступ вокруг области исключения.
Поддержка браузерами
Стоит отметить, что CSS-исключения в настоящее время работает только в Internet Explorer 10 и выше, а Edge еще раз демонстрирует, как Microsoft продвигает границы веб-браузеров (мы также благодарим их за разработку ). В настоящее время мы должны добавлять префикс -ms- к новому свойству.
И море красного уходит вправо…Чтобы лучше понять как работает CSS-исключение, мы подготовили простую начальную страницу, содержащую несколько строк текста и изображение аватара в конце.
Макет без CSS-исключенийЭто довольно распространенный шаблон в Интернете, поэтому давайте посмотрим, можно ли его немного отполировать, используя CSS-исключения. Предполагая, что ваш браузер поддерживает Исключения, мы надеемся получить следующее:
Использование CSS-исключений
Во-первых, давайте разместим текст в двух столбцах и поместим изображение аватара в центр. Неважно, как вы разместите макет, вы можете использовать CSS Flexbox, CSS-сетку или «традиционный» подход, используя свойство float .
Прекрасный текст в колонках (не обязательно для этой демонстрации)По рисунку видно, что изображение аватара было изъято из простыни документа и расположено поверх содержимого, загораживая его. Используя CSS-исключения, мы можем заставить текст обтекать изображение аватара.
Для этого, мы задаём свойство wrap-flow для аватарки и устанавливаем значение в both .
Avatar { -ms-wrap-flow: both; // Works in IE and Edge. wrap-flow: both; // Does"t not work in any browser. }
Свойство wrap-flow устанавливает.avatar как «область исключения»; область, в которую не должен попадать текст. Как вы можете видеть ниже, теперь текст обтекает справа и слева от изображения аватара.
Возможные значения
Другие допустимые значения: start , end , maximum , minimum , и clear .
Первое значение start - будет огибать содержимое вокруг начала области исключения, оставив конец области пустым.
Avatar { -ms-wrap-flow: start; }
Учитывая содержимое нашей страницы, результат будет выглядеть следующим образом.
Содержимое перемещается налево от изображения.Значение end , как следует из его названия, работает наоборот, оно будет огибать содержимое в конце области исключения.
Avatar { -ms-wrap-flow: end; }
И вот, что мы получаем на выходе:
Огибание справаПримечание : начало и конец области исключения определяется направлением текста содержимого. Если написание идёт справа-налево, как это часто видно с арабским и ивритом, содержимое огибается справа и заканчивается слева от области исключения.
В японском, когда написание идёт сверху-вниз, содержимое огибается сверху и заканчивается внизу.
Обтекание текста в разных направлениях написания. Изображение от (W3C)Третье допустимое значение это maximum .
Avatar { -ms-wrap-flow: maximum; }
С этим содержимое будет обёрнуто вокруг области исключения, где бы не было найдено более широкое пространство в области контейнера.
Значение minimum работает противоположным образом.
Avatar { -ms-wrap-flow: minimum; }
Здесь текст будет проходить через самое узкое пространство, доступное вокруг зоны исключения.
И последнее значение это clear .
Avatar { -ms-wrap-flow: clear; }
Оно очень похоже на тот clear , с которым вы уже знакомы по плавающему размещению элементов, тем, что он очистит правую и левую часть области исключения. Поэтому он позволяет обтекаемому тексту находится только сверху и снизу области исключения.
Отступ исключения
Аналогично CSS-фигурам модуль CSS-исключений также имеет свойство для задания отступа области исключения, а именно wrap-margin . В отличие от свойства margin , значение wrap-margin должно быть положительным.
Avatar { -ms-wrap-flow: end; -ms-wrap-margin: -10px; // Invalid. -ms-wrap-margin: 10px; // Valid. }
Кроме того, свойство wrap-margin не позволяет нам отдельно устанавливать границы каждой стороны (справа, слева, сверху и снизу). Будет ли эта функция представлена в будущем, пока не известно.
Avatar { -ms-wrap-flow: end; -ms-wrap-margin: 10px 20px 10px 30px; // Invalid. -ms-wrap-margin: 10px; // Valid. }
После этого мы должны увидеть больше пространства вокруг зоны исключения.
@supports
Учитывая, что мы разместили наш аватар поверх содержимого, без поддержки CSS-исключений у нас будет безобразный макет. Поэтому разумно рассмотреть резервный вариант и обернуть соответствующие стили правилом @supports следующим образом:
Site-content .avatar { width: 180px; height: 180px; margin-right: auto; margin-left: auto; text-align: center; margin-top: 80px; } /* wrap the relevant rules in a @supports declaration, just to be safe */ @supports (-ms-wrap-flow: both) { .site-content .avatar { position: absolute; top: 300px; left: 50%; margin-left: -90px; -ms-wrap-margin: 50px; -ms-wrap-flow: both } }
Теперь наши стили CSS-исключения будут применяться только, если браузер их поддерживает.
Подводим итог
CSS-исключения, а также CSS-фигуры и другие экспериментальные спецификации, позволят нам рассматривать макеты веб-сайтов намного дальше того, к чему мы привыкли. Надеемся, что мы увидим быстрое продвижение с поддержкой браузеров и пойдём дальше, чем команда Microsoft Edge!
- CSS Exclusions and Grid Layout - Рэйчел Эндрю
От переводчика
Приветствую, для вас подготовлен еще один перевод заметок на тему CSS. Мэтт Смит, разработчик из Портленда, поделился CSS-советами и выложил их на GitHub . Мне особенно понравилась его подборка, она структурирована, не особо громоздкая в плане скучных больших текстов и описаний, и в целом будет понятна даже новичку. Я буду рад, если в комментариях мы с вами обсудим каждый пункт и в итоге дадим некоторые заключения. Итак, приступим.Cодержание
Используем псевдо-класс:not для задания рамки навигации
Вместо того, чтобы задавать рамку (border) таким образом…/* добавляем рамку */ .nav li { border-right: 1px solid #666; }
… да еще и обнулять border последнему элементу…
/* удаляем рамку */ .nav li:last-child { border-right: none; }
… можно было просто использовать псевдо-класс:not(), который поможет нам выбрать только нужные элементы:
.nav li:not(:last-child) { border-right: 1px solid #666; }
Конечно, вы могли использовать такую выборку .nav li + li или даже .nav li:first-child ~ li , однако, если мы намеренно используем:not(), нам ясно, что CSS определяет границу всем элементам, кроме последнего, и теперь любому человеку будет понятно, что здесь происходит. Этот способ поддерживается в IE9+ и остальных.
Добавляем межстрочный интервал элементу body
Вам не следует добавлять высоту строки для каждого параграфа или заголовка (<р>,body { line-height: 1; }
Вот таким вот образом, любые текстовые элементы наследуют это свойство от главного родительского элемента body.
Центрируем по вертикали все что угодно
Нет, это не черная магия, вы действительно можете центрировать любой элемент по вертикали:html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
Хотите центрировать как-то еще? Вертикально, горизонтально… как-нибудь, где-нибудь? На CSS-Tricks вы можете ознакомиться со статьей и тогда вы сможете делать все, что угодно. Пример имеет поддержку в IE11+ и остальных.
Примечание : Следите за багами (ошибки) flexbox в IE11 и контролируйте процесс html-верстки.
Правильно разделяем запятыми элементы списков
Мы можем сделать наши элементы li так, чтобы они действительно выглядели как реальный список, записи которого разделены запятыми: ul > li:not(:last-child)::after { content: ","; }Используя псевдо-класс:not(), мы добавляем после каждого элемента ul-списка запятую, кроме последнего.
Отрицательный порядковый номер в nth-child
Используем отрицательные аргументы в nth-child для выбора элементов с 1 по n. li { display: none; } /* выбираем элементы с 1 по 3 и отображаем их */ li:nth-child(-n+3) { display: block; }Или, теперь, когда мы знаем все об использовании псевдо-класса:not(), можем попробовать так: /* скрываем все элемента ul-списка, кроме элементов с 1 по 3 */ li:not(:nth-child(-n+3)) { display: none; }
Ну, что, было довольно легко.
Используем SVG-логотипы
Нет, никаких причин не использовать SVG: .logo { background: url("logo.svg"); }SVG хорошо масштабируется под любое разрешение и поддерживается во всех браузерах, IE9+.Теперь мы можем использовать svg, вместо.png, .jpg, or .gif-файлов.
Примечание : Если у вас есть SVG-иконка только для какой-либо кнопки и, в случае, если SVG не был загружен, вы можете использовать доступную текстовую подсказку: .no-svg .icon-only::after { content: attr(aria-label); }
Аксиоматический CSS
Лоботомированная сова (аксиоматический СSS), да, это довольно странное название, однако с помощью универсального селектора (*) и одноуровневого селектора (+) можно получить мощные возможности CSS: * + * { margin-top: 1.5em; }В этом примере, все элементы в потоке, которые расположены после другого элемента, должны получить верхний отступ равный 1.5em.Более подробную информацию о "лоботомированной сове " можете прочитать в статье Хейдона Пикеринга, или перевод на русском .
Максимальная высота у CSS-слайдера
Реализовать CSS-слайдер можно с помощью «max-height» и «overflow:hidden» : .slider ul { max-height: 0; overflow: hidden; } .slider:hover ul { max-height: 1000px; transition: .3s ease; /* анимация для max-height */ }Наследуем box-sizing
Пусть box-sizing наследуется от html: html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }Теперь нам проще контролировать box-sizing в плагинах или компонентах, которые используют свои правила поведения. Поддержка в IE8+ и остальных.
Одинаковая ширина ячейки таблицы
Иногда, таблицы могут причинять боль в работе, поэтому попробуйте использовать table-layout: fixed , чтобы задействовать ячейки одинаковыми по ширине: .calendar { table-layout: fixed; }Мы избавляемся от боли с помощью table-layout . Поддержка в IE8+ и остальных.
Динамические внешние отступы при помощи flexbox
При работе с колоночным макетом, вы можете избавиться от использования css-селекторов nth-* , first-* , и last-child при помощи flexbox значения space-between : .list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; /* базовый размер отдельно взятого блока */ }Поддержка в IE11+ и остальных.
Используем селектор атрибутов пустых ссылок
Отображаем ссылки, когда a-элемент не имеет текстового значения, но при этом атрибут href содержит ссылку: a:empty::before { content: attr(href); }Это довольно удобно. Поддержка в IE9+ и остальных.
Стили по умолчанию для обычных ссылок
Добавляем по умолчанию стиль ссылкам: a:not() { color: #008000; text-decoration: underline; }Теперь ссылки, вставленные через визуальный редактор вашей CMS, которые обычно не имеют класса, будут отличаться от остальных ссылок, не затрагивая каскад.
