Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
rekomendaciji [2023/09/14 18:21] tro |
rekomendaciji [2023/10/05 18:13] (текущий) tro [CSS] |
||
|---|---|---|---|
| Строка 7: | Строка 7: | ||
| * графічні формати (які можуть) можна конвертувати у progresiv - тоді картинки будуть при поганому інтернеті хоть потрошку завантажуватись і відразу показуватись | * графічні формати (які можуть) можна конвертувати у progresiv - тоді картинки будуть при поганому інтернеті хоть потрошку завантажуватись і відразу показуватись | ||
| * Якщо при вказанні переходу по якрою # не писати далі куда а залишити просто # - то перейде до верху | * Якщо при вказанні переходу по якрою # не писати далі куда а залишити просто # - то перейде до верху | ||
| + | * Модальне вікно краще описувати внизу після футеру | ||
| ===== CSS ===== | ===== CSS ===== | ||
| * line-height = краще писати не абсолюними значеннями а рзраховувати line-height / font-size = 1.11 (два знаки після коми) (без em) | * line-height = краще писати не абсолюними значеннями а рзраховувати line-height / font-size = 1.11 (два знаки після коми) (без em) | ||
| * letter-spacing = краще писати не абсолюними значеннями а рзраховувати letter-spacing / font-size = 1.11 (два знаки після коми) -0.54em; | * letter-spacing = краще писати не абсолюними значеннями а рзраховувати letter-spacing / font-size = 1.11 (два знаки після коми) -0.54em; | ||
| * На один єлемент при вказанні классів можна через пробіл додавати додатковий клас у котрому будуть вже щось загальне вказано | * На один єлемент при вказанні классів можна через пробіл додавати додатковий клас у котрому будуть вже щось загальне вказано | ||
| + | * [[Скидання властивостей CSS]] | ||
| + | * Колапсування вертикальних маржинів - Вертикальні маржини сусідніх блокових елементів не складаються. Якщо є два елемента з різними значеннями властивості margin, вибирається найбільший margin із двох. Колапсування маржинів відбувається лише для блокових елементів. Верхні та нижні маржини на стику з батьківьским блоком ніби пробивають його й випадають назовні. Це одна з найчастіших помилок верстки. Робіть маржини лише між двома сусідніми елементами. | ||
| + | * Проміжок рядкових елементів - У рядкових та рядково-блочних елементів є правий проміжок. Це не margin або padding, а буквально порожнє місце. Це особливість того, як браузер розташовує рядковий контент у рядку. За умовчанням буде проміжок 4px — 1/4 розміру шрифту найближчого батьківського елемента. | ||
| + | * Щоб у зображенні придбати нижній і правий відступ - достатнього з нього зробити блоковим елемен | ||
| + | * Усі секії (section) ідуть впритик, | ||
| + | * Краще робити контейнер <div> з запасом у 15px | ||
| + | * Щоб поставити кнопку по центру - зробити кнопку блочнойю (дисплей блок) и поставити мражин 0 авто | ||
| + | * Якщо розмір кнопки залежить від тексту - пишемо паддінг, | ||
| + | * 2D-трансформації - CSS-переходи, | ||
| + | * Модальне вікно краще описувати внизу після футеру | ||
| + | * Для хеадера краще ставити z-index 1000 щоб він завжди був зверху | ||
| + | * Для заголовків модалок краще використовувати <p> а не <h> | ||
| + | * Щоб позиціювання поставити одному елементк absolute - то батьківському елементу треб поставити position: | ||