Малоизвестные причуды CSS: полезные советы и рекомендации

Малоизвестные причуды CSS: полезные советы и рекомендации

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

Вертикальное заполнение относительно ширины элемента, а не высоты

padding: 50% не добавляет отступ 50% от оригинальной высоты элемента, а добавляет 50% отступ от ширины родительского элемента.

Зная это, мы можем легко создавать чувствительные элементы, которые сохраняют соотношение высоты и ширины:

.square {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

margin перекрываются, но только иногда

Таким образом, пространство между следующими элементами будет 20px, а не 40px:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
<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

Несколько фонов

Вы можете добавить несколько фонов в один элемент и поместить их по-разному, просто отделив запятой:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

Узнать подробнее

Метки:

Похожие статьи:

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

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

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

Ваш 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