От автора: ниже вы найдете некоторые из самых странных функций CSS, а также советы и рекомендации CSS для продвинутых пользователей.
Вертикальное заполнение относительно ширины элемента, а не высоты
padding: 50% не добавляет отступ 50% от оригинальной высоты элемента, а добавляет 50% отступ от ширины родительского элемента.
Зная это, мы можем легко создавать чувствительные элементы, которые сохраняют соотношение высоты и ширины:
1 2 3 4 5 |
.square { width: 100%; height: 0; padding-bottom: 100%; } |
margin перекрываются, но только иногда
Таким образом, пространство между следующими элементами будет 20px, а не 40px:
1 2 |
<div style="margin-bottom:20px">foo</div> <div style="margin-top:20px">foo</div> |
Однако есть исключения! margin не перекрывается при следующих обстоятельствах:
всплывающие элементы
абсолютно позиционированные элементы
встроенные блочные элементы
элементы с заполнением настроены на что угодно, кроме видимого (они не сворачивают margin со своими детьми).
очищенные элементы (они не сворачивают верхний margin с нижним пределом их родительского блока).
корневой элемент
Непрозрачность может изменить порядок укладки индекса z
Скажем, у вас есть 3 divs, каждый из которых абсолютно позиционируется как содержащий другой элемент с увеличением числа z-индекса. Каждый следующий появится поверх предыдущего. Если вы добавите z-index: 10 к первому, теперь он появится поверх остальных двух, которые по-прежнему будут упорядочены. Пока все хорошо. Теперь добавьте «opacity: 0.99» в первый div и наблюдайте, как он сворачивается под другими двумя. 🙂
Больше информации о том, почему это происходит: //philipwalton.com/articles/what-no-one-told-you-about-z-index/
Пользовательские свойства и переменные CSS
Используя SASS или LESS, вы можете увидеть, что пользовательские свойства и переменные CSS являются эквивалентом функций, доступных в этих препроцессорах, но есть несколько ключевых различий, которые стоит изучить.
Для начала основы:
1 2 3 4 5 6 7 |
// you can set and use custom properties like such: :root { --foo: #000; } button { background-color: var(--foo); //background is black } |
Они также наследуются, поэтому, если вы переназначаете локальную переменную, она будет влиять на все дочерние элементы и, вопреки препроцессорам, в этом случае браузер фактически пересчитает все переменные и выражения.
Фоллбэки могут использоваться с запятыми, вы можете складывать несколько фоллбэков после запятой, и даже другие переменные:
1 2 3 |
.foo { color: var(—-my-var, 'blue'); } |
Это подводит нас к основному отличию от препроцессоров: переменные CSS динамичны и знают структуру DOM.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
::root { --default-color: #000000; } header { --primary-color: #ff0000; } a { color: var(--primary-color, --default-color); } <a href="">this is black</a> <header> <a href="">this is red.</a> </header> |
В отличие от первого примера наследуемости, этот пример основан на понимании фоллбэком, было ли установлено в родительском элементе DOM пользовательское свойство или нет.
Кроме того, они также могут быть легко изменены с помощью javascript:
1 2 3 4 |
// get variable from inline style element.style.getPropertyValue("—-my-var"); // set variable on inline style element.style.setProperty("--my-var", jsVar + 4); |
Поддерживается версией Edge15 и выше.
Вертикальный align: top| middle | bottom
Это работает только для inline (поправка: включая inline-block) и table-cell, это не законный способ выровнять элемент внутри его родителя, поэтому осталось только интуитивно поверить.
Используйте flexbox, или то, что теперь известно как вертикальное выравнивание douchebag (объяснено ниже). 🙂 Height: 100% может сработать не так, как вы думаете
То же касается свойства «высота: 100%», во многих случаях оно не делает того, что ожидает разработчик, потому что высота родительского элемента не задана. Так например:
1 2 3 4 5 |
<html> <body> <div style="height:100%;background:red;"></div> </body> </html> |
Это не заполнит всю страницу красным. Для того чтобы сделать это, вам нужно задать высоту body и HTML на 100%.
id > class
Идентификаторы стилей отменяют все стили классов. Это связано с тем, что идентификатор более точен, чем класс, аналогично «.foo.bar» будет отменяться только «.foo» или «.bar».
1 2 3 |
#foo { color: red; } .bar { color: green; } <h1 id="foo" class="bar">this will be red not green</h1> |
Таргетинг атрибутов
Вы можете настроить таргетинг на определенные атрибуты и их содержимое, например, на содержание атрибутов src или href.
1 2 3 4 |
// target all zip files, case insensitive a[href$=".zip" i] { } // make google.com links red [href*="google.com"] { color: red; } |
Это может помочь при отладке, например, отображать все элементы изображения с пустым атрибутом «alt» или без атрибута:
1 2 3 4 5 6 |
img:not([alt]) { border: 2px dashed red; } img[alt=""] { border: 2px dashed red; } |
Если вы используете Angular, эта техника также может быть полезна для ориентации на некоторые элементы, содержащие [ng-click]. Или, если хотите, вы можете настроить таргетинг на все ссылки, начинающиеся с «http» или «https» вместо локальных.
Несоответствие значений горизонтальной / вертикальной оси
При объявлении значений для горизонтальной и вертикальной оси обычно первое число объявляет вертикальные значения, а во втором — горизонтальное (т. Е. В «padding: 10px 20px», 10px- сверху и снизу, 20px- слева и справа). Это верно для padding, margin, borders, и т. Д. Почти все.
… за исключением «border-spacing» в таблицах, где имеет место точная противоположность: первый номер устанавливает горизонтальный и второй вертикальные значения … o_O
Несколько фонов
Вы можете добавить несколько фонов в один элемент и поместить их по-разному, просто отделив запятой:
1 |
background: url('example1.png') no-repeat center 50px, url('example2.jpg') no-repeat bottom top; |
Поддерживается версией IE11 и выше.
Укладка анимации
Подобно фону, вы также можете складывать анимации CSS:
1 2 3 4 5 6 7 8 9 10 11 |
@keyframes foo { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes bar { 0% { transform: translateX(-100px); } 100% { transform: translateX(0px); } } .element { animation: foo 2s 0s, bar 1s 0s; } |
Странное поведение «position: fixed» с «translateZ»
Добавление преобразования: translateZ (0); к контейнеру, который содержит элемент с положением: fixed; заставляет фиксированный элемент выравниваться с контейнером вместо окна.
Стилизование URL-адреса хэша (/ # foo) целевых элементов
Вы можете использовать: target pseudo-class для целевого элемента … Например, нажав <a href=»#foo»> Перейдя в Foo </a>, вы перейдете к элементу <div id = «foo»> foo </div> на странице. Теперь, если вы включили #foo: target {color: red; } в css, целевой текст элемента #foo будет красным.
Это может быть полезно, если вы хотите выделить целевой элемент для людей, которые пришли на страницу через внешнюю хэш-ссылку, например: www.example.com/#foo
Кроме того, что браузер будет прокручиваться до нужного элемента, вы также можете использовать CSS, чтобы сделать этот целевой раздел более визуальным. В наши дни это редко делается, но может быть очень полезным методом для улучшения пользовательского интерфейса.
Малоизвестное свойство “content: ‘foo’;”
Атрибуты данных. Вы можете использовать атрибуты данных для динамического содержимого CSS. Например:
1 2 3 4 |
<div data-text="foo"></div> div:before { content: attr(data-text); } |
Это может быть полезно, например, если вы хотите перевести тексты содержания псевдо-класса (например, при их использовании для всплывающих подсказок). В настоящее время attr () поддерживается для свойства контента, и почти ни один браузер не поддерживает его для других свойств, но, возможно, будут в будущем. Кроме того, значения из attr () являются строками, поэтому он действительно предназначен только для использования в качестве контента в первую очередь и не может использоваться для единиц (например, размер шрифта) или URL-адресов (например, content: url ()). Вот о чём речь:
Content: url()
Здесь может использоваться большое количестов типов медиа (изображения, видео, звук).
1 2 3 4 |
<div></div> div:before { content: url(image.jpg); } |
Однако, что может использовать для передачи любого контента из DOM в CSS, — это ранее упомянутые пользовательские свойства:
1 2 3 4 5 |
<div style="--background-image: url('//via.placeholder.com/150x150');"></div> div:after { content: ''; background-image: var(--background-image); } |
Инкрементный счетчик
Вы можете использовать свойство content: counter () для инкрементного подсчёта псевдо элементов:
1 2 3 4 5 6 7 |
counter-increment: myIndex; } p:before { content:counter(myIndex); } <p>foo</p> <p>bar</p> |
Открытые и закрытые кавычки
Свойство содержимого псевдоклассов вроде: before и: after может использовать открытые и закрытые кавычки:
1 2 3 4 5 6 |
q:before { content: open-quote; } q:after { content: close-quote; } |
Говоря о кавычках в сочетании с ранее упомянутым таргетингом атрибутов данных, вы даже можете использовать CSS для установки определенного локализованного стиля кавычек на основе языка сайта с использованием только свойства кавычек:
1 2 3 |
html[lang="fr"] q { Quotes: "«" "»"; } |
Font – это свойство-сокращение
«Font» — это свойство сокращения CSS. Поэтому вместо того, чтобы писать все свойства, вы можете просто объединить их все под одним:
1 2 3 4 5 6 7 8 9 10 11 12 |
h1 { font-weight: bold; font-style: italic; font-size: 1rem; //etc… } // vs h1 { font: italic lighter 1rem/150% Verdana, Helvetica, sans-serif; } // syntax // font: font-style font-variant font-weight font-size/line-height font-family; |
@supports для проверки поддержки браузера
Вы можете использовать запрос функции @supports для проверки поддержки браузера. В качестве примера: если вы хотите использовать «display: flex» только тогда, когда он действительно поддерживается, вы можете настроить его так:
1 2 3 4 5 |
@supports (display: flex) { div { display: flex; } } |
Двоеточие в именах классов
Использование двоеточия в именах классов может быть полезно для дифференциации цели. Некоторые фреймворки пользовательского интерфейса CSS (например, Tailwind) использовали следующее соглашение об именах:
1 2 |
<div class="justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around"> <button class="bg-blue hover:bg-blue-dark text-white hover:text-blue-light">Button</button> |
Объявление определенных классов для стилей зависания, вероятно, не является полезным в большинстве случаев, но способ, которым это соглашение об именах делает очевидным распознаванием состояний зависания, как таковой, обеспечивает лучшую читаемость.
В CSS вам просто нужно избежать двоеточия, например:
1 |
.sm\:justify-center { } |
Лоботомированный совиный селектор
Каждый читающий эту статью должен знать о лоботомированном совином селекторе:
1 2 3 |
* + * { margin-top: 2rem; } |
Полезно для ситуаций, когда у вас есть несколько элементов одного и того же типа, которым требуется некоторый интервал, например, список или элементы ссылок на навигацию.
1 2 3 4 5 6 7 8 9 10 |
li + li { margin-top: 1rem; } // vs li { margin-bottom: 1rem; } li:last-of-type { margin-bottom: 0; } |
Вертикальный выравниватель Douchebag
В то время как мы говорим о забавных селекторах, вы можете быть заинтересованы в том, что же было названо «вертикальным выравниванием douchebag»:
1 2 3 4 5 |
.element { position: relative; top: 50%; transform: translateY(-50%); } |
Свойство Font-feature-settings для шрифтов OpenType
Шрифты OpenType имеют настройки параметров, которые вы можете использовать, чтобы настроить шрифт по своему вкусу, используя свойство font-feature-settings.
Один конкретный прецедент для этой функции — это когда вы хотите использовать классный шрифт для таймера обратного отсчета, но это не будет монослоем. Это означает, что ширина чисел изменится и продолжит толкать контент. Решение:
1 2 |
font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; |
Усечение текста с помощью многоточия «…»
1 2 3 4 5 |
p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } |
Дополнительно: элемент wbr
Не CSS, но вот интересный малоизвестный HTML-элемент:
Но постойте, а где CSS Grid?
Эта статья достаточно длинная, может быть, в следующий раз. Совсем не похоже, что мы когда-нибудь закончим рассказывать про причуды и странности в CSS. 🙂
Автор: Peedu Tuisk
Источник: //medium.com/
Редакция: Команда webformyself.