3 речі, які ніхто не знає про CSS

Ви вважаєте, що знаєте CSS? Якщо результати безкоштовного онлайн-тесту не брешуть, більшість розробників знають CSS не так добре, як їм здається. У 3000 осіб, які пройшли тест, середній бал становить 55%.

Але середній бал це не таке цікаво. Я подивився, на які питання люди найчастіше дають неправильну відповідь. Для цієї статті я вивчив це і вибрав три найпроблемніші питання. Я розберу кожне запитання, покажу найпоширенішу відповідь і покажу правильну відповідь.

А після прочитання статті можете перевірити себе.

Питання №1: як краще задавати line-height?

Перше питання має бути простим для всіх, хто регулярно працює із формуванням тексту:

Вам потрібно встановити подвійний міжрядковий інтервал за промовчанням. Яке значення line-height найкраще підходить для цієї мети? * 200% * 2em * 2 * double

Перший варіант, який ми виключимо це double. Єдине ключове слово, яке приймає line-height це normal, я радий, що 99% це розуміють. 3 варіанти збирають приблизно однакову кількість прихильників.

Найбільш популярна відповідь 2em (його вибирають 39%). Звичайно, 2em дадуть вам подвійний інтервал у елемента, до якого він застосований і те саме дають і 200% (їх вибрали 21%). Або em у більшій моді, ніж відсотки чи люди не до кінця розуміють їх.

Однак правильна відповідь це 2 .

Я запам'ятав це ще на початку вивчення CSS. Завжди визначайте line-height без вказівки одиниць виміру – це дозволить вкладеним елементам з іншим розміром шрифту успадкувати саме інтервал, а не фіксовану висоту рядка.

Припустимо, що дефолтний розмір шрифту на сторінці дорівнює 12pt, а розмір шрифту в заголовку дорівнює 24pt. Якщо ви призначите line-height для body рівним 2em (або 200%), ви отримаєтевисоту рядка в 24pt (удвічі більше, ніж 12pt у body) у всьому документі, у тому числі в заголовку (а значить у заголовку буде одинарний інтервал).

А завдання line-height рівної 2 каже браузеру про необхідність зберігати саме співвідношення висоти рядка до розміру шрифту. Висота рядка в body дорівнюватиме 24pt, а в заголовку вона буде збільшуватися до 48pt.

Запитання 2: як створити перекриття елементів?

Це питання з підковиркою. Він вимагає досвіду трюків при створенні макетів із CSS:

Яка з властивостей CSS, використана сама по собі, може викликати перекриття елементів?

Вибрали відповідь? Тепер подивимося на деталі.

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

Властивість overflow ви також унеможливите, якщо ви з ним стикалися. Воно контролює поведінку контенту, що не вміщається в контейнер: чи обрізається він чи виходить за межі контейнера. І воно залежить від властивостей контейнера - саме по собі воно не може спричинити перекриття. Але 22% вважають інакше.

У нас залишилася правильна відповідь - margin і її дали лише 30%. Ви можете здивуватися, як властивість створює відстані між елементами створює перекриття, але відповідь проста: негативний margin може.

Для демонстрації цього створимо просту сторінку з двома елементами div , задамо нижньому негативний margin-top , наприклад, -100px . І тепер нижній див перекриває верхній на ті самі 100 пікселів.

На практиці ви практично ніколи не робите перекриття таким методом, але негативні відступи річ дуже зручна при позиціонуванні елементів. Я часто користуюся ним для виштовхування плаваючих елементів у зону педінгу їхнього контейнера.

ніхто

І невеликий екскурс в історію: у 2005 році саме перекриття елементів із негативними відступами дало нам триколонкові макети, відомі як One True Layout (пізніше Holy Grail layout).

Питання 3: псевдоелементи проти псевдокласів

Останнє питання грубувате, не сперечаюся. Але лише 23% тестованих відповіли на нього правильно, він чітко б'є по хворому місцю:

Який із наступних ефектів найкраще досягти за допомогою псевдоелемента?

  • Додавання тіні до елемента під час наведення миші.
  • Зміна кольору label у чекбокс при виборі.
  • Завдання квітів, що чергуються, для парних і непарних рядів у таблиці.
  • Виділення першого рядка параграфа жирним у гумовому макеті

Три ефекти зі списку досягаються за допомогою псевдокласів, а один за допомогою псевдоелементів. В чому різниця?

Псевдоелемент — частина документа, яку можна стилізувати в CSS, незважаючи на відсутність такого елемента. Це як віртуальний елемент — щось, що ви можете стилізувати навіть за відсутності HTML тегів.

З урахуванням цих відмінностей почнемо розбирати приклади.

Додавання тіні до посилання при наведенні

Посилання це HTML-елемент. Застосування до неї стилів в окремих станах говорить про використання псевдокласу, в даному випадку: hover.

Цей варіант обрали 22% тестованих.

Зміна кольору label у чекбокс при виборі.

label це справжній HTML-елемент, а не віртуальний. Коли пункт у чекбоксі вибраний, браузер застосовує до нього :checked . Ви можете використовувати цей псевдоклас при стилізації як самого чекбоксу, так і прив'язаного до нього label.

Цей варіант обрали 20% тестованих.

Завдання квітів, що чергуються, для парних і непарних рядів у таблиці.

Цей пункт обдурив багатьох, але в даному випадку йдеться знову про застосування стилів до існуючих HTML-елементів (в даному випадку tr ). Вибірка парних та непарних рядів це знову застосування псевдокласу.

Ці псевдокласи відповідно: nth-child (even) і: nth-child (odd). Із псевдоелементами їх сплутали 36%.

Виділення першого рядка параграфа жирним у гумовому макеті

І ось ми підійшли до правильної відповіді. У гумовому макеті ви не можете заздалегідь виділити потрібну кількість тексту в окремий елемент, що визначається динамічно.

:first-line це псевдоелемент, що дозволяє застосувати стилі до першого рядка текстового блоку, незалежно від її розміру на екрані.

Ви можете сказати "ОК", але не поспішайте - ніхто не знає різниці між псевдокласами і псевдоелементами, зокрема і W3С. У специфікації CSS селекторів вони відрізняються синтаксисом - псевдоелементи тепер виділяються подвійною двокрапкою (:: first-line), а псевдокласи - одинарним (: hover); з метою сумісності браузери підтримують і старий (однаковий) синтаксис.

Так, це грубувате питання, але CSS-гікі повинні відрізняти псевдоелементи від псевдокласів.

Висновок

Ось і всі — три найскладніші питання розібрано. Якщо ви дали хоча б одну правильну відповідь, все не так уже й погано. Два? Чудово! Три? Можете писати свої статті.