Интересные свойства, о которых многие никогда раньше не слышали.
CSS и HTML были краеугольным камнем Интернета на протяжении десятилетий.
Хотя HTML отвечал за создание структур веб-сайтов и упорядочивание текстов и графики, он мало что мог сделать, когда дело доходило до разработки веб-сайта.
Создание веб-сайтов с 1994 года было единственной целью CSS. Он стал языком, на котором описывалось, как веб-сайты должны выглядеть и чувствовать себя.
За прошедшие годы в CSS был добавлен ряд новых свойств, таких как Flexbox и Grid.
Несмотря на огромную популярность и растущую сложность создания веб-приложений, все еще существует ряд свойств и приемов CSS, о которых большинство разработчиков не знает.
Ниже приведены 6 свойств CSS, о которых вы, вероятно, никогда не слышали:
1. all
Вы когда-нибудь использовали CSS-фреймворк? Если да, то я почти уверен, что были времена, когда вы хотели переопределить некоторые элементы по своему вкусу.
Хотя наиболее распространенный способ сделать это - использовать свойство !important
в CSS, чтобы сделать акцент на текущем свойстве, игнорируя все остальные настройки и правила.
.header{ color: blue !important; font-size: 14px !important; }
Однако повторное написание одного и того же ключевого слова может сделать файл CSS беспорядочным.
Более простой способ сделать это - использовать свойство all
.
Есть 3 значения свойства all
- начальное, наследование и неустановленное.
.header{ all:initial; color: blue; font-size: 14px; }
all:initial
устанавливает для всех свойств элемента их резервные или начальные значения.
Chrome и Firefox поддерживают это свойство начиная с версии 37 и версии 27 соответственно. Это свойство также поддерживается в браузере Edge, но не в Internet Explorer.
2. writing-mode
Я написал недавнюю статью о некоторых из удивительных мест, где можно найти вдохновение в дизайне и наткнулся на множество сайтов, на которых тексты расположены вертикально и горизонтально.
С правой стороны (рядом с полосой прокрутки) изображения выше вы можете видеть текст, расположенный сбоку, что является удобным способом отображения дополнительной информации.
Свойство writing-mode
позволяет добиться именно этого.
Это свойство поддерживает следующие значения:
sideways-rl
: текст и другое содержимое располагаются вертикально сверху вниз и сбоку вправо.sideways-lr
: Как иsideways-rl
, текст и другое содержимое располагаются вертикально сверху вниз, но сбоку влево.vertical-rl
: текст и другое содержимое располагаются вертикально сверху вниз и справа налево по горизонтали. Если есть две или более строк, они помещаются слева от предыдущей.vertical-lr
: в отличие отvertical-rl
, по горизонтали текст располагается слева направо, и если есть две или более строк, строки размещаются справа от предыдущей строки.
Существует также horizontal-tb
, который представляет стандартный способ отображения текста.
Вы можете найти реализацию и фрагменты кода здесь.
3. background-clip
Это интересное свойство, которое позволяет нам установить пользовательскую графику для фона нашего элемента.
Наша настраиваемая графика может расширяться до рамки, поля заполнения или содержимого элемента.
Ниже представлена краткая реализация этого свойства:
HTML: -
<p class="border-box">The background extends behind the border.</p> <p class="padding-box">The background extends to the inside edge of the border.</p> <p class="content-box">The background extends only to the edge of the content box.</p> <p class="text">The background is clipped to the foreground text.</p>
CSS: -
p {
border: .8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
background: linear-gradient(60deg, red, yellow, red, yellow, red);
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,.2);
}
Выход:
Вы можете использовать собственное изображение и установить его в качестве фона текста, как показано ниже:
Стоит отметить, что вам нужно использовать свойство -webkit-background-clip
для Chrome и убедиться, что цвет текста установлен на прозрачный.
4. user-select
Если на вашем веб-сайте есть текст, который вы не хотите, чтобы пользователи могли копировать, это свойство, которое позволит вам это сделать.
Свойство user-select
указывает, можно ли выделить текст элемента.
Это не влияет на загружаемый контент, кроме текстовых полей.
.row-of-icons { -webkit-user-select: none; /* Chrome & Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; }
Это свойство можно использовать, чтобы убедиться, что выбран весь элемент.
.force-select {
user-select: all;
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
}
Вы можете найти полное руководство здесь.
5. white-space
Это свойство полезно при применении свойств text-overflow
, поскольку это свойство позволяет вам управлять потоком текста элемента.
Он принимает nowrap
, pre
, pre-wrap
, pre-line
и normal
в качестве значений свойств.
nowrap
предотвращает перенос текста внутри ширины и высоты элемента и допускает его переполнение.
Значение pre
заставляет браузер отображать разрывы строк и пробелы, которые появляются в коде, но по умолчанию удалены. Значение The pre-wrap
делает то же самое, за исключением того, что оно также обертывает текст в этом элементе.
Свойствоpre-line
разрывает строки в коде, но лишние пробелы не отображаются.
Это становится ясно из следующего примера:
HTML:
<div> <p class='zero'> Some text </p> <p class='first'> Some text </p> <p class='second'> Some text </p> <p class='third'> Some text </p> <p class='fourth'> Some text </p> </div>
CSS:
div{ width:100px; } p{ background:red; font-size:2rem; } .first{ white-space:nowrap; } .second{ white-space:pre; } .third{ white-space:pre-line; } .fourth{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
Выход:
6. border-image
свойство
Это свойство отлично подходит для разработки вашего веб-сайта.
Используя это свойство, вы можете создать красивые границы вокруг вашего элемента.
border-image
позволяет устанавливать собственные изображения в качестве границ.
Я собираюсь использовать это изображение, чтобы продемонстрировать это свойство.
HTML и CSS приведены ниже:
<body> <h1>This is a title</h1> </body> <!-- CSS below --> h1{ border: 10px solid transparent; padding: 15px; border-image: url(border.png) 20% round; }
Выход:
Это свойство можно использовать для создания необычных карточек или для выделения определенных частей текста.
Последние мысли
Front-end разработчики все время используют CSS и HTML, помимо JavaScript, и, зная об этом больше, можно быстрее, быстрее и качественнее создавать лучшие приложения.
Я поделился несколькими малоизвестными свойствами CSS, но таких свойств больше.
Несмотря на то, что CSS существует уже более двух десятилетий, у него все еще есть много возможностей и хитростей в рукаве.
Знание этого может облегчить разработку увлекательных CSS-артов и веб-сайтов.
Многие платформы позволяют бесплатно развертывать и размещать свои проекты, что позволяет вам сосредоточиться только на дизайне веб-сайта, не беспокоясь о хостинге.
Спасибо за прочтение!