Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
rekomendaciji [2023/09/19 14:32] 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) | ||
| Строка 13: | Строка 14: | ||
| * [[Скидання властивостей CSS]] | * [[Скидання властивостей CSS]] | ||
| * Колапсування вертикальних маржинів - Вертикальні маржини сусідніх блокових елементів не складаються. Якщо є два елемента з різними значеннями властивості margin, вибирається найбільший margin із двох. Колапсування маржинів відбувається лише для блокових елементів. Верхні та нижні маржини на стику з батьківьским блоком ніби пробивають його й випадають назовні. Це одна з найчастіших помилок верстки. Робіть маржини лише між двома сусідніми елементами. | * Колапсування вертикальних маржинів - Вертикальні маржини сусідніх блокових елементів не складаються. Якщо є два елемента з різними значеннями властивості margin, вибирається найбільший margin із двох. Колапсування маржинів відбувається лише для блокових елементів. Верхні та нижні маржини на стику з батьківьским блоком ніби пробивають його й випадають назовні. Це одна з найчастіших помилок верстки. Робіть маржини лише між двома сусідніми елементами. | ||
| - | * Проміжок рядкових елементів - У рядкових та рядково-блочних елементів є правий проміжок. Це не margin або padding, а буквально порожнє місце. Це особливість того, як браузер розташовує рядковий контент у рядку. | + | * Проміжок рядкових елементів - У рядкових та рядково-блочних елементів є правий проміжок. Це не margin або padding, а буквально порожнє місце. Це особливість того, як браузер розташовує рядковий контент у рядку. |
| + | * Щоб у зображенні придбати нижній і правий відступ - достатнього з нього зробити блоковим елемен | ||
| + | * Усі секії (section) ідуть впритик, | ||
| + | * Краще робити контейнер <div> з запасом у 15px | ||
| + | * Щоб поставити кнопку по центру - зробити кнопку блочнойю (дисплей блок) и поставити мражин 0 авто | ||
| + | * Якщо розмір кнопки залежить від тексту - пишемо паддінг, | ||
| + | * 2D-трансформації - CSS-переходи, | ||
| + | * Модальне вікно краще описувати внизу після футеру | ||
| + | * Для хеадера краще ставити z-index 1000 щоб він завжди був зверху | ||
| + | * Для заголовків модалок краще використовувати <p> а не <h> | ||
| + | * Щоб позиціювання поставити одному елементк absolute - то батьківському елементу треб поставити position: | ||