12 малко известни CSS факти
В изследванията си постоянно се натъквам на малки трикове, които не съм забелязвал преди. И така, реших да споделя наблюденията си в тази статия. Вярно е, че не всичко в тази публикация има ясна практическа стойност, но може би ще изберете полезна информация за себе си, която след това можете да използвате при разработването на вашите сайтове.
1. Свойството цвят не е само за текст
Нека започнем с прости неща. Свойството цвят се използва от всички разработчици на CSS. Независимо от опита за разработка, има момент, който се изпуска от поглед: свойството цвят определя не само цвета на текста.
Погледнете демонстрацията по-долу:
Забележка в CSS: за елемента тяло има само едно свойство цвят, свойството цвят е зададено на жълто. Както можете да видите всичко на страницата е жълто, включително:
- Алтернативен и осиротял текст на изображението
- Граници на списъчно поле
- Неупоряден маркер на списъка
- Цифров маркер в подреден списък
- Hr елемент
2. Свойството видимост може да бъде зададено да се свива
Вероятно сте използвали свойството видимост стотици пъти. Най-често използваните стойности са видими (по подразбиране за всички елементи) и скрити - елементът става невидим, тоест пространството, което заема, не е свито (за разлика от display: none).
За съжаление браузърите хаотично се справят със стойността на свиване. Погледнете демонстрацията:
CSS-Tricks препоръчва да не се използва свиване за свойството видимост .
3. Универсалният фон на собствеността има ново значение
В CSS2.1 родовото свойство за фон позволява до 5 характеристики на фона (стойности) - цвят на фона, фоново изображение, повторение на фона, прикачен фон и позиция на фона. В CSS3 и по-нови се добавят още три характеристики, което прави общо 8. По-долу е карта на стойностите:
Обърнете внимание на наклонената черта. Наклонената черта ви позволява да включите стойността на фона след позицията.
Освен това можете да свържете две допълнителни стойности, характеризиращи background-origin и background-clip .
Синтаксисът изглежда така:
Новите стойности работят добре във всички съвременни браузъри, но трябва да осигурите резервни копия за по-стари браузъри.
4. Свойството clip работи само върху абсолютно позиционирани елементи
Свойството clip работи по следния начин:
Свойството clip определя зоната на позиционирания елемент, в която ще се показва съдържанието му. Единственото ограничение е, че елемент, който използва клип, трябва да има абсолютно позициониране. По този начин трябва да направите следното:
Както можете да видите клипът не работи, когато позицията: absolute е отметнато.
Като алтернатива можете да зададете позиция: фиксирана, тъй като според спецификацията фиксираните елементи също се квалифицират като абсолютно позиционирани.