Интересные свойства, о которых многие никогда раньше не слышали.

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-артов и веб-сайтов.

Многие платформы позволяют бесплатно развертывать и размещать свои проекты, что позволяет вам сосредоточиться только на дизайне веб-сайта, не беспокоясь о хостинге.

Спасибо за прочтение!