Корисні фішки CSS #2

Всім привіт!

Це - черговий довгочит на тему CSS! Сьогодні розглянемо три зручних інструмента, які ви можете використати у власних проєктах та про які ви могли не знати 🤗

Position absolute

Уявімо, що ви хочете скористатися властивістю position absolute:

.square-wrap {
    position: relative;
    width: 300px;
    height: 300px;
}

.square {
    position: absolute;
    top: 1rem;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    background-color: rgb(255, 255, 255);
}
Просто білий квадрат

Щоб усе спрацювало, необхідно вказати положення квадрату за допомогою властивостей top, right, left, bottom. Гарна новина у тому, що задля цього ви можете скористатися скороченням, яке зменшить вихідний код:

.square-wrap {
    position: relative;
    width: 300px;
    height: 300px;
}

.square {
    position: absolute;
    inset: 1rem;
    background-color: rgb(255, 255, 255);
}

Вітаю! Ви неймовірні, місце заощаджене, а квадрат виглядає так само, як і в прикладі зверху.

Ну і підтримка переглядачами:

Усі сучасні браузери - досить непогано

Ширина 100%

Помічав, що багато людей ліплять width: 100% всюди, де це можливо. Схаменіться, діти! Це не тільки не має сенсу, бо в 90% випадків блочні елементи вже намагаються зайняти всю ширину, а ще може нашкодити, викликаючи випадки, коли в вас зʼявляється горизонтальний скрол.

Приховати пусті елементи

Пропоную забути про JS, коли вам потрібно приховати пусті елементи DOM, в яких немає ніякого вмісту. Наприклад:

У Левка немає роботи :(

Це можна виправити за допомогою CSS!

.job {
    padding: 5px 15px;
    border-radius: 5px;
    background-color: blue;
    width: fit-content;
}

.job:empty {
    display: none;
}

Проблема вирішена 😎 Ви неймовірні, зекономили декілька рядків коду, вас любить ваш ПМ та вся ваша родина.

Висновок

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

Поділись своїми ідеями в новій публікації.
Ми чекаємо саме на твій довгочит!
Микита
Микита@mykyta

Software Engineer

308Прочитань
3Автори
24Читачі
Підтримати
На Друкарні з 15 квітня

Більше від автора

  • Зручний інструмент CSS, про який мало хто знає

    Як користуватися CSS властивостями та відносними одиницями вимірювання (vh, vw, svh) правильно? Як заповнити весь viewport?

    Теми цього довгочиту:

    It

Вам також сподобається

  • Що таке принципи безпеки?

    Кожному принципу безпеки автоматично присвоюється ідентифікатор безпеки (SID) під час його створення. У Windows Server 2003 реєстраційні записи безпеки є основою для контролю доступу до ресурсів, що охороняються.

    Теми цього довгочиту:

    Безпека В Інтернеті
  • Світ став занадто складний… через Google. Отримання коду в смс.

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

    Теми цього довгочиту:

    Android
  • Паттерн “Репозиторій“ в JS

    В попередній статті ми розібрались з паттерном Специфікація Сьогодні ми поговоримо про логічне продовження паттерн репозиторій.

    Теми цього довгочиту:

    Js

Коментарі (4)

Непогано, але не вистачає пояснення цих властивостей. Наприклад, що той же inset робить, нащо ми його написали й т.д.

Вам також сподобається

  • Що таке принципи безпеки?

    Кожному принципу безпеки автоматично присвоюється ідентифікатор безпеки (SID) під час його створення. У Windows Server 2003 реєстраційні записи безпеки є основою для контролю доступу до ресурсів, що охороняються.

    Теми цього довгочиту:

    Безпека В Інтернеті
  • Світ став занадто складний… через Google. Отримання коду в смс.

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

    Теми цього довгочиту:

    Android
  • Паттерн “Репозиторій“ в JS

    В попередній статті ми розібрались з паттерном Специфікація Сьогодні ми поговоримо про логічне продовження паттерн репозиторій.

    Теми цього довгочиту:

    Js