3 неща, които никой не знае за CSS
Мислите ли, че знаете CSS? Ако резултатите от безплатния онлайн тест са верни, повечето разработчици не познават CSS толкова добре, колкото си мислят. 3000 души, положили теста, имат среден резултат от 55%.
Но средният резултат не е толкова интересен. Разгледах на какви въпроси хората най-често дават грешен отговор. За тази статия проучих това и избрах трите най-проблемни въпроса. Ще разбия всеки въпрос, ще покажа най-често срещания отговор и ще покажа правилния отговор.
И след като прочетете статията, можете да проверите сами.
Въпрос #1: Кой е най-добрият начин за задаване на височината на линията?
Първият въпрос трябва да е прост за всеки, който редовно работи с кофраж:
Трябва да зададете двойно разстояние по подразбиране. Коя е най-добрата височина на реда за тази цел? * 200% * 2em * 2 * двойно
Първият вариант, който ще изключим, е двойно. Единствената ключова дума, която приема line-height, е normal, радвам се, че 99% разбират това. Останалите 3 варианта събират приблизително същия брой поддръжници.
Най-популярният отговор е 2em (избран от 39%). Разбира се, 2em ще ви даде двойно разстояние върху елемента, към който е приложен, както и 200% (избрано от 21%). Или em са по-модерни от процентите, или хората не ги разбират напълно.
Правилният отговор обаче е 2.
Спомням си това от самото начало на изучаването на CSS. Винаги дефинирайте line-height, без да посочвате мерна единица - това ще позволи на вложени елементи с различен размер на шрифта да наследят точно разстоянието, а не фиксирана височина на реда.
Да приемем, че размерът на шрифта по подразбиране на страницата е 12pt, а размерът на шрифта в заглавката е 24pt. Ако зададете височината на линията на тялото на 2em (или 200%), ще получитевисочина на реда от 24pt (удвояване на 12pt от тялото) в целия документ, включително заглавката (което означава, че заглавката ще бъде с един интервал).
И задаването на line-height на 2 казва на браузъра да запази точно съотношението между височината на реда и размера на шрифта. Височината на реда в тялото ще бъде 24pt, а в заглавието ще се увеличи до 48pt.
Въпрос 2: как да създадете припокриване на елементи?
Това е трик въпрос. Изисква трикове за опит при създаване на оформления с CSS:
Кое свойство на CSS, използвано само по себе си, може да причини припокриване на елементи?
Избрахте ли отговор? Сега нека да разгледаме подробностите.
Тук отново има лесно изключена опция: фон , само 2% от тестерите са се спрели на него, останалите помнят, че това свойство се отнася за фонови цветове и изображения.
Освен това ще изключите свойството overflow, ако сте го попаднали. Той контролира поведението на съдържание, което не се побира в контейнера: дали е изрязано или излиза извън контейнера. И зависи от свойствата на контейнера - сам по себе си не може да причини припокриване. Но 22% смятат друго.
Все още имаме верния отговор - марж и той беше даден само с 30%. Може да се чудите как свойство за разстояние създава припокривания, но отговорът е прост: отрицателен марж може.
За да демонстрираме това, нека създадем проста страница с два елемента div, да дадем на долния отрицателен margin-top, като -100px. И сега долният div припокрива горния със същите 100 пиксела.
На практика почти никога не наслагвате по този начин, но отрицателната подложка е много удобна при позициониране на елементи. Често го използвам, за да избутам плаващи елементи в областта на подложката на контейнера им.
И малко история: през 2005 г. припокриването на елементи с отрицателна подложка ни даде оформления с три колони, известни като One True Layout (по-късно оформление Holy Grail).
Въпрос 3: Псевдо-елементи срещу псевдо-класове
Последният въпрос е груб, не споря. Но само 23% от тестваните са отговорили правилно, явно удря там, където боли:
Кой от следните ефекти се постига най-добре с псевдо елемент?
- Добавяне на сянка към елемент при задържане на мишката.
- Променете цвета на етикета на квадратчето за отметка, когато е избрано.
- Указва редуващи се цветове за четни и нечетни редове в таблица.
- Удебеляване на първия ред на абзац в течно оформление
Три ефекта от списъка се постигат с псевдокласове, а един с псевдоелементи. Каква е разликата?
Псевдоелемент е част от документ, която може да бъде стилизирана в CSS въпреки липсата на такъв елемент. Това е като виртуален елемент - нещо, което можете да стилизирате дори и да няма HTML тагове.
Имайки предвид тези разлики, нека започнем с някои примери.
Добавяне на сянка към връзка при задържане
Връзката е HTML елемент. Оформянето му в отделни състояния показва използването на псевдоклас, в този случай :hover.
Този вариант са избрали 22% от тестваните.
Променете цвета на етикета на квадратчето за отметка, когато е избрано.
label е реален HTML елемент, а не виртуален. Когато е избран елемент в поле за отметка, браузърът прилага класа :checked към него. Можете да използвате този псевдоклас, когато оформяте както самото поле за отметка, така и етикета, прикачен към него.
Този вариант са избрали 20% от тестваните.
Указва редуващи се цветове за четни и нечетни редове в таблица.
Тази точка заблуди много хора, но в този случай отново става въпрос за прилагане на стилове към съществуващи HTML елементи (в случая tr). Вземането на проби от четни и нечетни редове отново е приложение на псевдокласа.
Тези псевдо-класове са съответно :nth-child(even) и :nth-child(odd) . 36% са ги объркали с псевдоелементи.
Удебеляване на първия ред на абзац в течно оформление
И сега стигаме до верния отговор. При плавно оформление не можете предварително да разпределите правилното количество текст в един елемент, това се определя динамично.
:first-line е псевдоелемент, който ви позволява да прилагате стилове към първия ред на текстов блок, независимо от неговия размер на екрана.
Можете да кажете „ОК“, но не бързайте - никой не знае разликата между псевдо-класове и псевдо-елементи, включително W3C. В CSS спецификацията за селектори те се различават по синтаксис – псевдоелементите вече се отличават с двойно двоеточие ( ::first-line ), а псевдокласовете с едно двоеточие ( :hover ); От съображения за съвместимост браузърите също поддържат стария (същия) синтаксис.
Да, това е груб въпрос, но маниаците на CSS трябва да правят разлика между псевдо-елементи и псевдо-класове.
Заключение
Това е всичко - трите най-трудни въпроса са подредени. Ако сте дали поне един верен отговор, не е толкова зле. две? Страхотен! Три? Можете да пишете вашите статии.