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

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

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

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

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

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

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

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

Однако есть исключения! 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 являются эквивалентом функций, доступных в этих препроцессорах, но есть несколько ключевых различий, которые стоит изучить.

Для начала основы:

Они также наследуются, поэтому, если вы переназначаете локальную переменную, она будет влиять на все дочерние элементы и, вопреки препроцессорам, в этом случае браузер фактически пересчитает все переменные и выражения.

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

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

В отличие от первого примера наследуемости, этот пример основан на понимании фоллбэком, было ли установлено в родительском элементе DOM пользовательское свойство или нет.

Кроме того, они также могут быть легко изменены с помощью javascript:

Поддерживается версией Edge15 и выше.

Вертикальный align: top| middle | bottom

Это работает только для inline (поправка: включая inline-block) и table-cell, это не законный способ выровнять элемент внутри его родителя, поэтому осталось только интуитивно поверить.

Используйте flexbox, или то, что теперь известно как вертикальное выравнивание douchebag (объяснено ниже). :) Height: 100% может сработать не так, как вы думаете

То же касается свойства «высота: 100%», во многих случаях оно не делает того, что ожидает разработчик, потому что высота родительского элемента не задана. Так например:

Это не заполнит всю страницу красным. Для того чтобы сделать это, вам нужно задать высоту body и HTML на 100%.

id > class

Идентификаторы стилей отменяют все стили классов. Это связано с тем, что идентификатор более точен, чем класс, аналогично «.foo.bar» будет отменяться только «.foo» или «.bar».

Таргетинг атрибутов

Вы можете настроить таргетинг на определенные атрибуты и их содержимое, например, на содержание атрибутов src или href.

Это может помочь при отладке, например, отображать все элементы изображения с пустым атрибутом «alt» или без атрибута:

Если вы используете Angular, эта техника также может быть полезна для ориентации на некоторые элементы, содержащие [ng-click]. Или, если хотите, вы можете настроить таргетинг на все ссылки, начинающиеся с «http» или «https» вместо локальных.

Несоответствие значений горизонтальной / вертикальной оси

При объявлении значений для горизонтальной и вертикальной оси обычно первое число объявляет вертикальные значения, а во втором — горизонтальное (т. Е. В «padding: 10px 20px», 10px- сверху и снизу, 20px- слева и справа). Это верно для padding, margin, borders, и т. Д. Почти все.

… за исключением «border-spacing» в таблицах, где имеет место точная противоположность: первый номер устанавливает горизонтальный и второй вертикальные значения … o_O

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

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

Поддерживается версией IE11 и выше.

Укладка анимации

Подобно фону, вы также можете складывать анимации CSS:

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Странное поведение «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. Например:

Это может быть полезно, например, если вы хотите перевести тексты содержания псевдо-класса (например, при их использовании для всплывающих подсказок). В настоящее время attr () поддерживается для свойства контента, и почти ни один браузер не поддерживает его для других свойств, но, возможно, будут в будущем. Кроме того, значения из attr () являются строками, поэтому он действительно предназначен только для использования в качестве контента в первую очередь и не может использоваться для единиц (например, размер шрифта) или URL-адресов (например, content: url ()). Вот о чём речь:

Content: url()

Здесь может использоваться большое количестов типов медиа (изображения, видео, звук).

Однако, что может использовать для передачи любого контента из DOM в CSS, — это ранее упомянутые пользовательские свойства:

Инкрементный счетчик

Вы можете использовать свойство content: counter () для инкрементного подсчёта псевдо элементов:

Открытые и закрытые кавычки

Свойство содержимого псевдоклассов вроде: before и: after может использовать открытые и закрытые кавычки:

Говоря о кавычках в сочетании с ранее упомянутым таргетингом атрибутов данных, вы даже можете использовать CSS для установки определенного локализованного стиля кавычек на основе языка сайта с использованием только свойства кавычек:

Font – это свойство-сокращение

«Font» — это свойство сокращения CSS. Поэтому вместо того, чтобы писать все свойства, вы можете просто объединить их все под одним:

@supports для проверки поддержки браузера

Вы можете использовать запрос функции @supports для проверки поддержки браузера. В качестве примера: если вы хотите использовать «display: flex» только тогда, когда он действительно поддерживается, вы можете настроить его так:

Двоеточие в именах классов

Использование двоеточия в именах классов может быть полезно для дифференциации цели. Некоторые фреймворки пользовательского интерфейса CSS (например, Tailwind) использовали следующее соглашение об именах:

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

В CSS вам просто нужно избежать двоеточия, например:

Лоботомированный совиный селектор

Каждый читающий эту статью должен знать о лоботомированном совином селекторе:

Полезно для ситуаций, когда у вас есть несколько элементов одного и того же типа, которым требуется некоторый интервал, например, список или элементы ссылок на навигацию.

Вертикальный выравниватель Douchebag

В то время как мы говорим о забавных селекторах, вы можете быть заинтересованы в том, что же было названо «вертикальным выравниванием douchebag»:

Свойство Font-feature-settings для шрифтов OpenType

Шрифты OpenType имеют настройки параметров, которые вы можете использовать, чтобы настроить шрифт по своему вкусу, используя свойство font-feature-settings.

Один конкретный прецедент для этой функции — это когда вы хотите использовать классный шрифт для таймера обратного отсчета, но это не будет монослоем. Это означает, что ширина чисел изменится и продолжит толкать контент. Решение:

Усечение текста с помощью многоточия «…»

Дополнительно: элемент wbr

Не CSS, но вот интересный малоизвестный HTML-элемент: , он позволяет отметить место, где должно сломаться слово.

Но постойте, а где CSS Grid?

Эта статья достаточно длинная, может быть, в следующий раз. Совсем не похоже, что мы когда-нибудь закончим рассказывать про причуды и странности в CSS. :)

Автор: Peedu Tuisk

Источник: https://medium.com/

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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree