CSS не слишком сложный язык. Но даже если вы писали CSS в течение многих лет, вы, вероятно, все еще сталкиваетесь с новыми вещами — свойствами, которые вы никогда не использовали, значениями, которые вы никогда не рассматривали, или деталями спецификации, о которых вы никогда не знали.
В своем исследовании я все время сталкиваюсь с новыми маленькими лакомыми кусочками, поэтому я решил поделиться некоторыми из них в этом посте. Следует признать, что не все в этом посте будет иметь непосредственную практическую ценность, но, возможно, вы можете мысленно сохранить некоторые из них для дальнейшего использования.
1. Свойство color не только для текста
Давайте начнем с более простых вещей. Свойство color широко используется каждым разработчиком CSS. Однако некоторые из вас, не имеющие опыта работы с CSS, могут не понимать, что он определяет не только цвет текста.
Посмотрите на демо ниже:
Обратите внимание, что в CSS используется только одно свойство цвета для элемента body , которое устанавливает yellow . Как видите, все на странице желтое, в том числе:
- Альтернативный текст отображается на отсутствующем изображении
- Граница на элементе списка
- Пуля (или маркер) в неупорядоченном списке
- Номер маркера в упорядоченном списке
- Элемент
hr
Интересно, что элемент hr по умолчанию не наследует значение свойства color, но мне пришлось заставить его сделать это с помощью border-color: inherit . Это довольно странное поведение для меня.
Все это подтверждается спецификацией :
Это свойство описывает цвет переднего плана текста элемента
содержание. Кроме того, он используется для обеспечения потенциальной косвенной стоимости
… для любых других свойств, которые принимают значения цвета.
Я не могу думать ни о чем другом, что можно было бы квалифицировать как «передний план», но если вы это сделаете, дайте нам знать в комментариях.
2. Свойство visibility может быть установлено как «свернуть»
Вы, вероятно, использовали свойство visibility сотни раз. Наиболее часто используемые значения являются visible (по умолчанию для всех элементов) и hidden , что заставляет элемент исчезать, в то же время позволяя ему по-прежнему занимать пространство, как если бы он был там (в отличие от display: none ).
Третье и редко используемое значение для свойства visibility — это collapse . Это работает так же, как и hidden для всех элементов, кроме строк таблицы, групп строк таблицы, столбцов таблицы и групп столбцов таблицы. В случае этих элементов на основе таблицы предполагается, что значение collapse будет работать аналогично display: none , так что пространство, занимаемое свернутой строкой / столбцом, может быть занято другим содержимым.
К сожалению, браузер не справляется с collapse . Попробуйте следующую демонстрацию:
Альманах CSS-хитрости советует никогда не использовать это из-за несоответствий браузера.
Из моих наблюдений:
- В Chrome не имеет значения, применяете ли вы
collapseилиhidden(см. Этот отчет об ошибке и комментарии ) - В Firefox, Opera и IE11
collapseреагирует точно так, как и должно быть: строка удаляется, а строка ниже перемещается вверх.
По общему признанию, это значение, вероятно, редко когда-либо будет использоваться, но оно существует, поэтому, если вы не знали об этом раньше, я думаю, каким-то странным образом вы стали умнее.
3. background свойство Shorthand имеет новые значения
в CSS2.1 свойство сокращения background включало в себя 5 сокращенных значений — background-color , background-image , background-repeat , background-attachment и background-position . В CSS3 и более поздних версиях он включает в себя еще три, в общей сложности до 8. Вот как отображаются значения:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
Обратите внимание на косую черту, аналогично тому, как можно написать сокращенный font и border-radius . Косая черта позволяет вам включить значение background-size после позиции в поддерживаемых браузерах.
Кроме того, у вас также есть до двух необязательных объявлений для background-origin и background-clip .
Так что синтаксис выглядит так:
.example { background: aquamarine url(img.png) no-repeat scroll center center / 50% content-box content-box; }
Проверьте это в своем браузере, используя эту демонстрацию:
Что касается поддержки браузеров, эти новые значения, кажется, прекрасно работают во всех современных браузерах, но, скорее всего, вам придется обеспечить хорошие запасные варианты для любых неподдерживающих браузеров, чтобы они постепенно снижались.
4. Свойство clip работает только на абсолютно позиционированных элементах.
Говоря о background-clip , вы, вероятно, также видели clip раньше. Это выглядит так:
.example { clip: rect(110px, 160px, 170px, 60px); }
Это «обрезает» элемент в указанных местах (объяснение здесь ). Единственное предостережение в том, что элемент, к которому вы применяете clip должен быть расположен абсолютно. Итак, вы должны сделать это:
.example { position: absolute; clip: rect(110px, 160px, 170px, 60px); }
Вы можете увидеть, как клип отключен в демке ниже, когда position: absolute переключается:
Вы также можете установить элемент в position: fixed , потому что, согласно спецификации , элементы с фиксированной позицией также квалифицируются как «абсолютно позиционированные» элементы.
5. Вертикальные проценты относятся к ширине контейнера, а не к высоте
Поначалу это немного запутывает, о чем я писал раньше . Хотя вы, возможно, знаете, что процентные значения ширины рассчитываются на основе ширины контейнера, проценты для таких свойств, как верхний и нижний отступы, а также верхний и нижний поля также рассчитываются на основе ширины контейнера, а не высоты.
Вот пример, который вы можете настроить с помощью ползунка диапазона, чтобы увидеть эффект:
Обратите внимание, что на внутреннем блоке объявлено 3 «вертикальных» процента (верхний и нижний отступы и нижнее поле). Когда ползунок перемещается, он меняет только ширину контейнера. Но другие значения изменяются в ответ на это, как показывают выходные данные на странице, показывающие, что эти значения, когда они объявлены в процентах, основаны на ширине контейнера.
6. border собственности является своего рода начальным
Мы все сделали это в какой-то момент:
.example { border: solid 1px black; }
Свойство border — это сокращенное свойство, которое задает border-style border-width border-color — все в одном объявлении.
Но не забывайте, что каждое из свойств, которое представляет свойство border , само по себе является сокращенным свойством. Таким образом, одна border-width может быть объявлена:
.example { border-width: 2px 5px 1px 0; }
Это установит различную ширину для каждой из четырех границ. И то же самое верно для border-color border-style , как показано в этой ужасной демонстрации:
Кроме того, каждое из этих свойств может быть разбито еще больше с помощью border-left-style , border-top-width , border-bottom-color и т. Д.
Но суть в том, что вы не можете использовать обычную стенограмму border для установки разных значений для разных сторон. Так что это стенография внутри стенографии внутри стенографии, но не совсем.
7. Свойство text-decoration теперь является сокращением
Я знал, что что-то в этом списке взорвет ваш разум.
Теперь это стандарт, в соответствии со спецификацией:
a { text-decoration: overline aqua wavy; }
Это свойство теперь представляет 3 свойства: text-decoration-line , text-decoration-color и text-decoration-style .
К сожалению, Firefox — единственный браузер, который поддерживает эти новые свойства и (я предполагаю, для обратной совместимости) пока не поддерживает их в сокращенном виде.
Попробуйте демо ниже в Firefox:
Демонстрация использует длинные значения, чтобы сделать это. В конечном итоге это будет непросто, потому что в настоящее время любой браузер, который видит дополнительное значение в text-decoration , аннулирует всю декларацию, что явно не подходит для обратной совместимости.
8. Свойство border-width принимает значения ключевых слов
Не совсем потрясающе, и это не ново, но, в дополнение к стандартным значениям длины (например, 5px или 1em), свойство border-width принимает три значения ключевых слов: medium , thin и thick .
Фактически, начальное значение свойства border-width — «средний». Демо ниже использует «толстый»:
Когда браузеры отображают эти значения ключевых слов, спецификация не требует, чтобы они отображали их на значения определенной длины, но, как я вижу, все браузеры, похоже, используют 1px, 3px и 5px.
9. Никто не использует border-image
Я писал о свойстве CSS3 border-image в SitePoint некоторое время назад . Эта функция поддерживается во всех современных браузерах, кроме IE10 и ниже. Но кого это волнует?
Это похоже на действительно удобную функцию, позволяющую создавать плавные изображения границ. Используйте ручку изменения размера в этой демонстрации, чтобы проверить это:
К сожалению, border-image кажется новинкой, которую используют не многие люди. Но, возможно, я ошибаюсь. Если вам известны какие-либо примеры использования border-image в реальном проекте или если вы его использовали, сообщите нам об этом в комментариях, и я буду рад признать, что ошибся.
10. Есть свойство empty-cells
У этого есть поддержка везде, включая IE8, и это выглядит так:
table { empty-cells: hide; }
Как вы, наверное, поняли, он используется для таблиц HTML. Он сообщает браузеру, показывать или скрывать ячейки таблицы, в которых нет содержимого. Попробуйте кнопку переключения в этой демонстрации, чтобы увидеть эффект изменения значения свойства empty-cells :
В этом случае я должен был убедиться, что границы были видны, а не свернуты, и мне пришлось добавить некоторый интервал между границами ячейки. В некоторых случаях это свойство не будет иметь визуального эффекта, потому что на столе должно быть что-то видимое, чтобы это могло иметь какое-либо значение.
11. Свойство font-style принимает значение «наклонный»
Почти каждый раз, когда вы видите свойство font-style , оно используется со значением «normal» или «italic». Но вы также можете придать ему значение «косой»:
Но что именно это означает? И почему это выглядит так же, как курсив?
Спецификация объясняет, что значение «косо»…
«… Выбирает шрифт, который помечается как наклонное лицо или курсивное лицо, если это не так».
Описание «курсив» в спецификации в основном то же самое. Слово «наклонный» — это типографский термин, который в основном представляет наклонный текст, но не настоящий курсив.
Благодаря тому, что CSS обрабатывает наклонный текст, он взаимозаменяем с курсивом, если (как поясняется в спецификации) используемый шрифт не имеет грани, идентифицируемой как наклонный.
Я никогда не слышал о шрифте, который на самом деле имеет косое лицо, но, возможно, я ошибаюсь. Из проведенного мною исследования кажется, что для шрифта неправильно предлагать как курсив, так и наклонные грани, потому что предполагается, что наклонный является ложной версией курсива для шрифтов, которые не имеют истинного курсива.
Так что, если я не ошибаюсь, это означает, что если у шрифта нет истинного курсивного лица, установите CSS в font-style: italic будет фактически отображать шрифт как font-style: oblique .
12. word-wrap по словам такой же, как overflow-wrap
Свойство переноса слов используется не слишком часто, но оно очень полезно в определенных обстоятельствах. Один из часто используемых примеров — помочь обернуть длинные непрерывные строки текста (например, URL-адреса), а не вырваться из контейнера. Вот пример:
Поскольку изначально это было создание Microsoft, это свойство поддерживается во всех браузерах, включая Internet Explorer, вплоть до IE5.5.
Несмотря на кросс-браузер и, как я вижу, постоянную поддержку, W3C решил заменить word-wrap на overflow-wrap — я полагаю, из-за того, что прежнее название было ошибочным. overflow-wrap имеет те же значения, что и word-wrap , и word-wrap word-wrap теперь считается «альтернативным синтаксисом» для overflow-wrap .
Хотя некоторые новые браузеры поддерживают overflow-wrap , беспокоиться об этом кажется бессмысленным, поскольку старые браузеры прекрасно справляются со переносом word-wrap , и все браузеры обязаны продолжать поддерживать word-wrap неопределенного времени по устаревшим причинам.
Мы можем начать использовать overflow-wrap когда все используемые браузеры автоматически обновляются, но до тех пор я не вижу смысла менять старый синтаксис.
Сколько из них были новыми для вас?
Вы узнали что-нибудь из этого поста? Я надеюсь, что это так. Вероятно, большинство опытных разработчиков CSS знали многие, если не все, вышеперечисленные пункты. Но, вероятно, те, кто новичок в CSS, выиграют больше от них.
Было бы интересно узнать, сколько из этих пунктов были новыми для наших читателей. Оставьте комментарий ниже, сообщая нам, сколько было для вас нового (например, 6/12, 4/12 или что-то еще).
Pick-up загружает больше CSS-советов и подсказок с учащимся членством. Вы получите доступ к десяткам книг и курсов, включая бестселлеры, такие как Jump Start CSS , CSS Anthology и другие .