От автора: ниже вы найдете некоторые из самых странных функций CSS, а также советы и рекомендации CSS для продвинутых пользователей.
Вертикальное заполнение относительно ширины элемента, а не высоты
padding: 50% не добавляет отступ 50% от оригинальной высоты элемента, а добавляет 50% отступ от ширины родительского элемента.
Зная это, мы можем легко создавать чувствительные элементы, которые сохраняют соотношение высоты и ширины:
.square { width: 100%; height: 0; padding-bottom: 100%;
}
margin перекрываются, но только иногда
Таким образом, пространство между следующими элементами будет 20px, а не 40px:
<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 и наблюдайте, как он сворачивается под другими двумя. 
Больше информации о том, почему это происходит: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Пользовательские свойства и переменные CSS
Используя SASS или LESS, вы можете увидеть, что пользовательские свойства и переменные CSS являются эквивалентом функций, доступных в этих препроцессорах, но есть несколько ключевых различий, которые стоит изучить.
Для начала основы:
// you can set and use custom properties like such:
:root { --foo: #000;
}
button { background-color: var(--foo); //background is black
}
Они также наследуются, поэтому, если вы переназначаете локальную переменную, она будет влиять на все дочерние элементы и, вопреки препроцессорам, в этом случае браузер фактически пересчитает все переменные и выражения.
Фоллбэки могут использоваться с запятыми, вы можете складывать несколько фоллбэков после запятой, и даже другие переменные:
.foo { color: var(—-my-var, 'blue');
}
Это подводит нас к основному отличию от препроцессоров: переменные CSS динамичны и знают структуру DOM.
::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:
// 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%», во многих случаях оно не делает того, что ожидает разработчик, потому что высота родительского элемента не задана. Так например:
<html> <body> <div style="height:100%;background:red;"></div> </body> </html>
Это не заполнит всю страницу красным. Для того чтобы сделать это, вам нужно задать высоту body и HTML на 100%.
id > class
Идентификаторы стилей отменяют все стили классов. Это связано с тем, что идентификатор более точен, чем класс, аналогично «.foo.bar» будет отменяться только «.foo» или «.bar».
#foo { color: red; } .bar { color: green; } <h1 id="foo" class="bar">this will be red not green</h1>
Таргетинг атрибутов
Вы можете настроить таргетинг на определенные атрибуты и их содержимое, например, на содержание атрибутов src или href.
// target all zip files, case insensitive
a[href$=".zip" i] { }
// make google.com links red
[href*="google.com"] { color: red; }
Это может помочь при отладке, например, отображать все элементы изображения с пустым атрибутом «alt» или без атрибута:
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
Несколько фонов
Вы можете добавить несколько фонов в один элемент и поместить их по-разному, просто отделив запятой:
background: url('example1.png') no-repeat center 50px, url('example2.jpg') no-repeat bottom top;
Поддерживается версией IE11 и выше.
Укладка анимации
Подобно фону, вы также можете складывать анимации CSS:
@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. Например:
<div data-text="foo"></div>
div:before { content: attr(data-text);
}
Это может быть полезно, например, если вы хотите перевести тексты содержания псевдо-класса (например, при их использовании для всплывающих подсказок). В настоящее время attr () поддерживается для свойства контента, и почти ни один браузер не поддерживает его для других свойств, но, возможно, будут в будущем. Кроме того, значения из attr () являются строками, поэтому он действительно предназначен только для использования в качестве контента в первую очередь и не может использоваться для единиц (например, размер шрифта) или URL-адресов (например, content: url ()). Вот о чём речь:
Content: url()
Здесь может использоваться большое количестов типов медиа (изображения, видео, звук).
<div></div>
div:before { content: url(image.jpg);
}
Однако, что может использовать для передачи любого контента из DOM в CSS, — это ранее упомянутые пользовательские свойства:
<div style="--background-image: url('http://via.placeholder.com/150x150');"></div>
div:after { content: ''; background-image: var(--background-image);
}
Инкрементный счетчик
Вы можете использовать свойство content: counter () для инкрементного подсчёта псевдо элементов:
counter-increment: myIndex;
}
p:before { content:counter(myIndex);
}
<p>foo</p>
<p>bar</p>
Открытые и закрытые кавычки
Свойство содержимого псевдоклассов вроде: before и: after может использовать открытые и закрытые кавычки:
q:before { content: open-quote;
}
q:after { content: close-quote;
}
Говоря о кавычках в сочетании с ранее упомянутым таргетингом атрибутов данных, вы даже можете использовать CSS для установки определенного локализованного стиля кавычек на основе языка сайта с использованием только свойства кавычек:
html[lang="fr"] q { Quotes: "«" "»";
}
Font – это свойство-сокращение
«Font» — это свойство сокращения CSS. Поэтому вместо того, чтобы писать все свойства, вы можете просто объединить их все под одним:
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» только тогда, когда он действительно поддерживается, вы можете настроить его так:
@supports (display: flex) { div { display: flex; }
}
Двоеточие в именах классов
Использование двоеточия в именах классов может быть полезно для дифференциации цели. Некоторые фреймворки пользовательского интерфейса CSS (например, Tailwind) использовали следующее соглашение об именах:
<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 вам просто нужно избежать двоеточия, например:
.sm\:justify-center { }
Лоботомированный совиный селектор
Каждый читающий эту статью должен знать о лоботомированном совином селекторе:
* + * { margin-top: 2rem;
}
Полезно для ситуаций, когда у вас есть несколько элементов одного и того же типа, которым требуется некоторый интервал, например, список или элементы ссылок на навигацию.
li + li { margin-top: 1rem;
}
// vs
li { margin-bottom: 1rem;
}
li:last-of-type { margin-bottom: 0;
}
Вертикальный выравниватель Douchebag
В то время как мы говорим о забавных селекторах, вы можете быть заинтересованы в том, что же было названо «вертикальным выравниванием douchebag»:
.element { position: relative; top: 50%; transform: translateY(-50%);
}
Свойство Font-feature-settings для шрифтов OpenType
Шрифты OpenType имеют настройки параметров, которые вы можете использовать, чтобы настроить шрифт по своему вкусу, используя свойство font-feature-settings.
Один конкретный прецедент для этой функции — это когда вы хотите использовать классный шрифт для таймера обратного отсчета, но это не будет монослоем. Это означает, что ширина чисел изменится и продолжит толкать контент. Решение:
font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
Усечение текста с помощью многоточия «…»
p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
Дополнительно: элемент wbr
Не CSS, но вот интересный малоизвестный HTML-элемент:
Но постойте, а где CSS Grid?
Эта статья достаточно длинная, может быть, в следующий раз. Совсем не похоже, что мы когда-нибудь закончим рассказывать про причуды и странности в CSS.
Автор: Peedu Tuisk
Источник: https://medium.com/
Редакция: Команда webformyself.