Вчимося стенографічним позначенням css

Оголошуючи конкретні параметри CSS, у вас є вибір - підписувати параметри повністю, або вкорочувати параметр, і включати в нього відразу кілька інших.

Давайте навчимося використовувати стенографічні позначення, і познайомимося з деякими прикладами. Ми постараємося максимально розгорнуто пояснити вам про те, що це таке.

Приклад стенографічних позначень

Для того щоб більш чітко розуміти, що означає це стенографічне позначення, давайте розглянемо той же самий параметр, вказаний в повному форматі:

Ви вже можете бачити, чому більшість CSS-розробників вважають за краще використовувати стенографічні позначення - перший приклад наочно показує нам, як можна 5 рядків вмістити в одну.

Простий приклад стенографічних позначень

Деякі стенографічні позначення працюють вкрай простим чином. Приклад з параметром фону, який ми вам навели вище, є одним з найскладніших типів (складніше, ніж в прикладах, які слідують далі в статті). Існує також дуже прості до розуміння стенографічні позначення.

Поля і відступи - відмінні приклади параметрів, які в процесі розробки використовуються дуже часто. І дуже часто їх використовують в стенографічних обозначеніяx. До того ж, їх не так складно розуміти:

В даному прикладі, хоча ми і опустили три інших значення, ці значення повинні бути рівними з єдиним відображеним. Отже, за допомогою коду, всі 4 сторони вказаного елемента матимуть значення відступу рівне 20 пікселям.

Ми також можемо зробити наступне:

В даному прикладі ми докладно оголошуємо верхній і правий відступи. Нижній і лівий відступи, хоча і не оголошені точно, матимуть такі ж значення, як верхній і правий (саме в цьому порядку). Отже, блок буде мати верхній і нижній відступи рівні 20 пікселям, а ліва і права сторони будуть мати відступи рівні 10 пікселям.

Межі і параметр CSS3 border-radius працюватимуть приблизно таким же чином, за винятком того, що параметр закруглені кути пов'язаний з кутами, а не сторонами.

Більш складні стенографічні позначення

Існують також і більш складні варіації стенографічних позначень, але (за деякими винятками) які навряд чи викличуть проблеми, якщо добре навчитися ними користуватися. Приклад з фоном, який ми приводили раніше, якраз є одним з таких позначень.

Давайте відразу виділимо значення, з якими у вас можуть виникнути непорозуміння:

* List-style
* font
* border
* outline

CSS3-властивості, які використовують стенографічні позначення з трохи ускладненим стилем записи, включають в себе:

Так що ж робить ці значення більш складними? Так як ці параметри приймають різні типи значень (іноді ключові слова, іноді якісь пункти і так далі), внесення конкретних значень в стенографічні позначення часто може призвести до несподіваних результатів.

Ось приклад використання параметра background:

Використавши вищенаведений код, ви, ймовірно, очікуєте, що цільовий елемент буде оформлений неповторним фоновим зображення, встановленим поверх синього фону. Але цього не станеться, поки ми не перевернемо послідовність значень. Так як ми використовували стенографічне позначення фону, це призводить до того, що всі значення, пов'язані з параметром фону, скидається до вихідного положення. В даному випадку, колір фону стає «прозорим», переписуючи значення «синього».

Не попадайтеся в пастки

Важливо розуміти, що кожен раз, коли ви використовуєте одне з цих ускладнених позначень, все опущені значення, пов'язані з цим умовним позначенням, будуть скинуті до замовчування.

В принципі, це не проблема, тому що з параметрами, пов'язаними з фонами, списками, відступами і т.д. значення не успадковуються від батьківських елементів. Єдиний момент, коли ми зіткнулися з проблемами, полягав в зв'язку стенографічного позначення зі шрифтами.

Саме це і наштовхнуло нас на створення такого невеликого керівництва, де обговорюються деякі проблеми, з якими ви можете зіткнутися з часом роботи зі стенографічними позначеннями шрифтів. Ми очікуємо, що конкретні типографические параметри будуть успадковувати значення від батьківських елементів. Але коли ми використовуємо шрифт з умовним позначенням, всі параметри, пов'язані з позначенням, скидаються до вихідного значення, що перериває процес природного наслідування.

Під час роботи з стенографічними позначеннями шрифтів і іншими позначеннями, ви також можете зіткнутися з проблемою, яка полягає в тому, що якщо ви опустіть обов'язкове значення, то вся рядок буде ігноруватися браузером. Це те, на що варто звернути увагу, інакше будете довго чухати потилицю і не зможете зрозуміти, чому ж у вас це не працює.

Звичайно ж, якщо ви новачок, то краще використовувати повні значення, щоб спочатку зрозуміти, де і що підходить. Але в більшості випадків набагато зручніше і продуктивніше використовувати стенографічні позначення.