CSS від А до Я: рішення поширених проблем в CSS

17

Від автора: в якості бонусу в цій статті з серії CSS від А до Я я відповів на часті запитання по CSS. Сподіваюся, мої поради будуть корисними.

Відеоурок і його текстову версію властивості quotes можна подивитися за посиланням.

Q значить питання по CSS

За цитат в CSS толком сказати нічого, як і з будь-якого селектору, властивості або значенням на букву Q. Так що в цій статті я відповів на запитання від моїх студентів, читачів та колег.

Як CSS зробити вертикальне центрування?

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

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

Візьмемо як приклад HTML-код нижче. Це розмітка модального вікна .modal всередині контейнера:

Message title

Message text lorem ipsum dolor sit amet

Для абсолютної центрування елемента .modal можна поєднати абсолютне позиціонування і властивість translate. Перший етап – це розмістити лівий верхній кут блоку в центр контейнера. Для цього необхідно перемістити верхню і ліву межі на 50% ширини та висоти батьківського блоку відповідно:

.container {position: relative; width: 100vw; height: 100vh;}
.modal {position: absolute; top: 50%; left: 50%;}

Другий етап – повернути елемент в абсолютний центр контейнера. Для цього необхідно зрушити блок на половину ширини та висоти тому.

Якщо нам відомі розміри блоку .modal, ми можемо все це зробити за допомогою негативних магдіп’ов і ділення властивостей width і height на 2. Однак якщо модальне вікно може змінювати свій розмір (наприклад, розмір заданий у відсотках), такий підхід не спрацює.

Тому можна скористатися властивістю transform і зрушувати елемент у відсотках від поточного розміру.

.modal {position: absolute; top: 50%; left: 50%;}
/* вліво на половину ширини, вгору на половину висоти*/
transform: translate(-50%, -50%);

Ось і все, елемент ідеально центрований, навіть з відносними розмірами.

Що ти робиш з вендорными префіксами в CSS?

Ви могли помітити, що у своїй першій статті по вертикальному центрування я використовував властивість transform без вендорних префіксів. На це у мене було дві причини. Перша – це спрощує читання і набір коду, а друга – маленький секрет. Я більше взагалі не пишу вендорные префікси.

Я досі помічаю за собою, як заходжу на caniuse.com щоб перевірити підтримку різних властивостей і функцій. Однак тепер я більше не пишу вендорные префікси в своєму коді.

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

Вкрай рекомендую використовувати препроцесор для написання CSS коду і встановити Autoprefixer. Я використовую Sass, але до нього працював і в інших препроцессорах. Autoprefixer – плагін для PostCSS, який автоматично додає потрібні префікси в скомпільований CSS код, використовуючи дані з сайту caniuse.com. В мережі повно плагінів під будь-який популярний таск раннер. Всіх і не порекомендуешь!

Мої стилі не працюють. Можеш допомогти?

Коротка відповідь – можливо. Однак завжди вкрай важко налагоджувати чийсь код віддалено тільки за описом проблеми. Я розповім вам, як я отлаживаю поганий CSS код:

Переконайтеся, що файли були збережені.

Перевірте підсвічування синтаксису у редакторі коду і перегляньте код на будь-які невідповідності.

Перевірте відсутні лапки, дужки, крапки з комами.

Переконайтеся, що в браузері використовуються саме ті файли, які ви редагуєте.

Перевірте правильність шляхів (для файлів CSS, зображень і т. д.). Перевірити правильність завантаження зовнішніх файлів у вкладках мережа, вихідні коди і консоль панелі розробника.

Проінспектуйте елементи і перевірте правильність написання класів.

Проінспектуйте елементи і перевірте правильність написання властивостей. У Chrome будь неправильне властивість або значення буде підсвічується жовтою іконкою на вкладці з розміткою.

Проінспектуйте і поиграйтесь зі значеннями, щоб побачити різницю.

Швидше за все, до цього етапу ви отловите проблему. Якщо ні – потрібно копати ще глибше.

Можна попросити допомоги онлайн або особисто. І якщо все ж просите допомоги, зробіть так, щоб у вас були посилання на Codepen або JSFiddle, щоб людина могла подивитися, в чому у вас виникла проблема.

Grunt або Gulp?

Для вивчення Grunt’а мені знадобилося досить багато часу, але я зробив це. Спочатку я не зовсім розумів, навіщо він потрібен, проте коли я зрозумів, я навчився з його допомогою запускати локальний сервер, компілювати Sass, стискати JS файли і попереджати себе про помилки в синтаксисі прямо під час написання коду. Мені потрібно якийсь час, щоб звикнути до нього, але я був щасливий.

Коли я почув про Gulp, я відразу ж зайняв позицію «якщо не зламано – не чіпай». Gulp робить все те ж саме, що і Grunt, тільки по-іншому. Але я помилявся.

Нещодавно я працював в команді над проектом одного клієнта. Хлопці працювали з Gulp, і мені довелося. І я скажу вам, він дуже швидкий! У Grunt компіляція Sass займає секунди, але з Gulp ми говоримо про мілісекундах.

Я повністю змінив свою думку, і поки не вийде щось краще, я буду працювати з Gulp. Сподіваюся, ці питання і відповіді були вам цікаві, і ви почерпнули щось для себе. Якщо у вас залишилися ще питання, не соромтеся, пишіть мені.