12 малко известни факта за CSS, CSS
С факта, че CSS не е много сложен език, малцина ще спорят. Но ако пишете върху него от доста дълго време, вероятно все още откривате все повече и повече от неговите характеристики - свойства, които не сте използвали преди, стойности, които не сте взели предвид, или специфични подробности, за които дори не сте чували.
През времето, което прекарах в изучаване и прилагане на CSS, непрекъснато се натъквах на нови неща и в тази статия ще споделя някои от тях с вас.
Разбира се, не всички от тях ще намерят практическо приложение, но може би някои ще ви бъдат полезни в бъдеще.
1. Свойството цвят не е само за текст
Да започнем с най-простото. Свойството цвят се използва много често от всеки CSS разработчик. Някои от вас, които не са толкова разбиращи в CSS, може да не го осъзнават, но цветът определя повече от цвета на текста.
Обърнете внимание, че използваме само едно свойство цвят, върху елемента body, зададено на yellow.
И както можете да видите, всичко на страницата става жълто:
Интересното е, че hr не наследява свойството цвят по подразбиране, но го принудих да го направи с помощта на border-color: inherit. За мен тази функция изглежда малко странна.
Всичко описано по-горе е показано в спецификацията.
2. Свойството за видимост може да приема стойността "свиване"
Мисля, че сте използвали свойството за видимост стотици пъти. Най-честата му употреба е с visible (по подразбиране за всички елементи) и hidden , което прави елемента невидим и му позволява да заема свое място в маркирането едновременно (за разлика от display: none).
Третият и най-рядък вариантизползвайки свойството за видимост - стойността на свиване. Работи по същия начин като скрития с всички елементи, с изключение на клетките, групите клетки, колоните и групите колони на таблицата.
В случай на елементи на таблица, стойността на свиване предполага подобна операция за показване: няма - областта, заета от клетка/колона на свита таблица, може да бъде заета от друго съдържание на маркиране.
Но какво всъщност се случва? Браузърите показват стойността на свиване по доста различни начини.
Всъщност това свойство се използва рядко, но въпреки това съществува и ако не сте знаели за него преди, то сега в известен смисъл сте станали малко по-образовани.
3. Свойството за стенографски фон получи нови стойности
В спецификацията на CSS 2.1 съкратеното свойство на фона има 5 стойности — фонов цвят, фоново изображение, фоново повторение, фоново прикачване и фонова позиция.
Още три стойности са добавени в CSS3 и по-късно. Бяха общо осем.
Ето пълния синтаксис:
Обърнете внимание на наклонената черта. Може да се използва по същия начин, както със свойствата на шрифта и радиуса на границата. Наклонената черта ще ви позволи да включите стойността на фоновия размер след позициониране, но само в браузъри, които го поддържат.
На всичкото отгоре имате две незадължителни свойства background-origin и background-clip на ваше разположение.
Можете да го изпробвате във вашия браузър, като използвате тази демонстрация.
Що се отнася до правилното показване, тези нововъведения работят чудесно във всички съвременни браузъри, но не забравяйте за включването на опции за резервен код за случаите, когато се използва доста остарял браузър.
4. Свойството clip се отнася само за елементи сабсолютно позициониране
Когато споменете background-clip, вероятно ще си спомните, че сте виждали клип пред него.
Изглеждаше така.
Този код ще "подстриже" елемента в определени области (описани тук по-подробно).
Единственото нещо, за което искам да ви предупредя е, че трябва да позиционирате изрязания елемент абсолютно.
Като този:
В примера по-долу можете да видите как да деактивирате „изрязването“, когато свойството position: absolute е активирано.
Можете също така да приложите свойството position към елемент със стойност fixed, тъй като според спецификацията елемент на фиксирана позиция също се дефинира като елемент, който е абсолютно позициониран.
5. Процентната стойност на вертикалните стойности се задава спрямо ширината на контейнера, а не спрямо височината на елемента
Това, за което писах по-рано, може да ви подведе.
Може би знаете, че когато се дефинира ширината на елемент като процент, стойността се изчислява въз основа на ширината на контейнера.
Но стойностите на такива свойства като margin-top, margin-bottom, padding-top и padding-bottom, когато се посочват процентни стойности, също се изчисляват въз основа на ширината на същия контейнер, а не на неговата височина, както може да изглежда логично.
За по-голяма яснота в този пример ще можете да използвате плъзгач, за да зададете стойността на ширината.
Забележете, че задавам три процента за вътрешната област ( margin-top, margin-bottom и padding-bottom). Плъзгачът променя само стойността на ширината на контейнера.
Стойността на другите параметри на площта варира спрямо ширината, както е посочено в проценти. Това също е показано в примера.
6. граничен имот
Всички сме използвали товакод:
Свойството border е съкращение за няколко свойства, които дефинират стойностите border-style, border-width и border-color.
Но имайте предвид, че всяко свойство, което описвате със стенограмата на границата, само по себе си е съкратено свойство.
Така че border-width може да се дефинира отделно:
Кодът по-горе ще зададе различни ширини за всяка от четирите граници. Това също работи за свойствата border-color и border-style, както можем да видим от примера по-долу:
Освен това, всяко от тези свойства може да бъде разделено на border-left-style, border-top-width, border-bottom-color и т.н.
Но въпросът е, че не можете да използвате нормалното свойство border, за да зададете различни стойности за различни страни.
Защото се оказва, че това е влагането на съкратено свойство в друго съкратено свойство, което от своя страна е вътре в друго съкратено свойство, въпреки че това не е напълно вярно.
7. Свойството text-decoration вече е съкратено
Сигурен съм, че кодът по-долу ще ви шашне. Това вече е стандартът, както е отразено в спецификацията:
Сега това свойство съдържа три: text-decoration-line, text-decoration-color и text-decoration-style.
Странното е, че Firefox, досега единственият браузър, който поддържа и трите от тези свойства, не поддържа стенограма за тях. Предполагам, че причината е в проблема с обратната съвместимост.
Стартирайте тази демонстрация във Firefox.
8. Свойството border-width работи с ключови стойности
Това не шокира света, не е ново, но в допълнение към цифровите стойности на дължината по подразбиране (като 5px или 1em), свойството border-width вече приема три ключа:средно, това и трикове.
Всъщност стойността по подразбиране за ширина на границата е "средна". Демото използва "дебел".
Спецификацията не изисква браузърите да прехвърлят ключове към конкретни стойности, но както виждам, всички браузъри използват съответно 1px, 3px и 5px.
9. Никой не използва свойството border-image
Писах за свойството border-image от спецификацията на CSS3 по-рано. Тази функция се поддържа от всички браузъри с изключение на IE 10.
Но има ли нужда от него?
Това лаконично свойство ви позволява да създавате подвижни рамки за изображения. Използвайте демонстрацията, за да видите как изглежда.
Изненадващо, border-image изглежда като нещо ново, което повечето хора се страхуват да използват. Може би греша.
10. Какво ще кажете за свойството празни клетки?
Това свойство се поддържа от всички браузъри, включително IE8:
Както можете да предположите, той се използва за HTML таблици. Той определя дали ще се показват празни клетки или не.
Опитайте да завъртите бутона в тази демонстрация, за да видите как работи промяната на свойството празни клетки:
Тъй като в този пример трябва да се уверя, че таблицата не се раздалечава и границите на клетките остават видими, добавих малко подложка между тях. В някои случаи промяната на свойството празни клетки няма да има видим ефект.
11. Свойството font-style вече може да приема стойността "oblique"
Почти всеки път, когато видите свойство за стил на шрифта, то се използва със стойността " нормален " или " курсив ". Но може да означава и "косо":
Какво всъщност означава това и защо изглежда като обикновен „курсив“?
INспецификацията за значението на "наклонен" казва...
"... избран е тип шрифт "курсив" или се използва тип шрифт "курсив", ако "курсив" не е наличен."
Описанието на значението на " italic " в спецификацията е приблизително същото. Думата "наклонен" е типографски термин и представлява наклонен шрифт, но не е курсив.
Поради начина, по който CSS обработва курсивния шрифт, той може да се използва взаимозаменяемо с курсив, ако (както е отразено в спецификацията) използваният шрифт всъщност не е курсив.
Никога не съм чувал за шрифт, който има курсив, но отново може да греша.
От това, което събрах, следва, че един шрифт не може да бъде и курсив, и курсив едновременно, тъй като курсивът трябва да замени курсива в шрифтове, които нямат курсив.
От което, ако не се лъжа, следва, че ако шрифтът не изглежда като italic, а в CSS си написал за него font-style: italic, браузърът ще го покаже като font-style: oblique .
12. word-wrap е същото като overflow-wrap
Не мога да класифицирам свойството word-wrap като едно от често използваните, но в някои моменти може да бъде от голяма полза.
Тъй като това нещо е оригиналната разработка на Microsoft, то се поддържа от всички браузъри до IE 5.5.
Въпреки че е удобен за различни браузъри, W3C реши да замени word-wrap с overflow-wrap и предполагам, че предишното име беше счетено за неправилно.
.overflow-wrap има същия набор от стойности като word-wrap, а word-wrap вече се нарича „алтернативен синтаксис“ на overflow-wrap.
Но много малко браузъри поддържат overflow-wrap, не мисля, че има смисъл да се използваповсеместно, докато word-wrap работи и всички браузъри ще продължат да поддържат това свойство, ако е необходимо, за да поддържат съвместимост.
Според мен можете да започнете да използвате новия синтаксис, когато всички браузъри се актуализират, но не преди това.
Колко нови неща научихте?
Кажете ми, научихте ли нещо ново от този пост? Надявам се, че сте го разбрали.
Разбира се, има хора, които знаят повече, ако не и ВСИЧКО, за написаното от мен тук. Но за мнозина тази информация ще бъде много този път.
Преводът на статията „12 малко известни CSS факта“ е изготвен от приятелския екип на проекта „Изграждане на уеб сайт от А до Я“.