CSS: выравнивание элементов

Порой плавающие элементы могут быть очень изворотливыми. У них есть отвратительная привычка выходить за пределы родительских контейнеров и сеять хаос в макетах.

Но эту проблему можно решить с помощью небольшой хитрости, которую можно назвать clearfix-hack:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Добавив таким образом класс clearfix к любому контейнеру с плавающими дочерними элементами, можно восстановить порядок. Псевдоэлемент ::after создает невидимый блок, следующий за содержимым контейнера, это позволяет очистить поток плавающих элементов и сохранить макет красивым и аккуратным.

#frontend #css

CSS: пользовательский скроллбар

С помощью псевдоэлементов ::-webkit-scrollbar, ::-webkit-scrollbar-track , ::-webkit-scrollbar-thumb можно переделать скроллбар в соответствии с требованиями к дизайну сайта:

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Настраиваемая полоса прокрутки работает в браузерах на основе WebKit (например, Chrome и Safari). Можно настроить её цвет и размеры так, чтобы они идеально соответствовали общему стилю страниц.

Помните: несмтроя на то что этот CSS-трюк отлично подходит для WebKit, другие браузеры могут не поддерживать используемые псевдоэлементы. Чтобы достичь единообразия пользовательских интерфейсов, необходимо проверять такой код во всех браузерах.

#frontend #css

Tailwind: тень для png

Tailwind позволяет создавать тень, оборачивающую контур фигуры для файлов в формате png c прозрачным фоном.

Чтобы создать эффект тени, необходимо использовать изображение в формате png с прозрачным фоном.
Все, что остаётся сделать - применить к картинке класс drop-shadow:

<img src="https://i.imgur.com/q3SXJQf.png" class="filter drop-shadow">

Такой трюк не сработает в Tailwind CSS 2ой версии

Также, эффект тени можно создать с помощью класса shadow. В этом случае тень будет следовать не контурам фигуры, а обтекать рамку изображения.

<img src="https://i.imgur.com/q3SXJQf.png" class="filter shadow">

#frontend #tailwind #css

CSS: центрирование для Flexbox

Вспомним про быстрый и простой способ центрирования контента по вертикали и горизонтали с помощью Flexbox,

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Если применить класс flex-center к контейнеру, все дочерние элементы отцентруются.

#frontend #css #flexbox

CSS: атрибуты данных

Атрибуты данных полезны не только в JavaScript. С их помощью можно менять и стили HTML-элементов. Создадим элементы <div>...</div>, которые будут содержать атрибуты data-raing с разными значениями:

<div data-rating="1">Rating</div>
<div data-rating="5">Rating</div>

Стилизуем элементы, используя только название пользовательского атрибута данных:

[data-rating] {
  color: indigo;
}

Текст элементов с атрибутом data-rating окраситься в фиолетовый цвет.
Но можно более тонко подойти к возможностям пользовательских атрибутов для CSS, и применить стили к их значениям:

[data-rating='1'] {
  color: red;
}
[data-rating='5'] {
  color: indigo;
}

Наконец, с помощью CSS можно вывести сами значения пользовательских атрибутов после основного текста:

[data-rating]::after {
  content: attr(data-rating);
}

#frontend #css

Tailwind: центрирование элемента

Давайте разберем, как можно разместить HTML-элемент в центре родительского блока по горизонтали и по вертикали с помощью Tailwind CSS.
Для реализации такой задачи в Tailwind существует два метода:

1. центрирование с использованием Flexbox модели,
2. центрирование с использванием Grid модели.

Размещение элемента по центру с Grid CSS

<div class="grid h-screen place-items-center">
    <p>Centered using Tailwind Grid</p>
</div>

Это все, что нужно, для того чтобы элемент выровнялся по центру, как по горизонтали, так и по вертикали.

1. grid: применяет к div свойство display: grid,
2. place-items-center: отвечает за свойство place-item: center и центрирует вложенные элементы по горизонтали и по вертикали,
3. h-screen: позволяет элементу занять всю высоту области просмотра (viewport).

Размещение элемента по центру с Flexbox CSS

<div class="flex items-center justify-center h-screen">
  <p>Centered using Tailwind Flex</p>
</div>

Разберем используемые классы:

1. flex: добавляет CSS-свойство display: flex
2. justify-center: центрирует вложенные элементы по горизонтали
3. items-center: центрирует вложенные элементы по вертикали
4. h-screen: позволяет элементу занять всю высоту области просмотра (viewport).

#frontend #css #tailwind

CSS: counter

Что такое CSS-счетчики? Их можно рассматривать, как переменные CSS, значения которых увеличиваются по определенным правилам.

Чтобы инициализировать счетчик нужно пройти процедуру его сброса counter-reset с указанием произвольного названия счетчика (пользовательского идентификатора) в качестве параметра. Сброс счетчика может быть CSS-свойством любого HTML-элемента.

Давайте создадим счетчик paragraph и посчитаем все элементы p страницы

body {
  counter-reset: paragraph;
}

p::before {
  counter-increment: paragraph;
  content: 'Параграф ' counter(paragraph) ': ';
}

Читать далее

CSS: вложенность

Читать

В CSS вложенность позвояяет размещать одни правила в других. Это особенно полезно для управления стилями, зависящими от контекста. Например, есть класс container и нужно стилизовать его дочерние элементы item. Теперь можно создать CSS-правила для item непосредственно внутри container.

В 2024 году вложенность стилей стала понятна непосредственно для браузеров.

Это означает, что для компиляции вложенных правил не нужен препроцессор. Например, для элемента ввода данных HTML-формы:

<form>
    <label for="name">Name:
        <input type="text" id="name">
    </label>
</form>

можно создать вложенные стили:

input {
    border: red 2px solid;
}

label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {
        border: purple 2px solid;
    }
}

#frontend #css

JavaScript: онлайн или офлайн

Читать

Порой пользователю веб-сервиса необходимо знать о потере подключения к Интернету. Например, он может работать с кэшированной информацией, думая, что сайт не обновляется администраторами, в то время как основной причиной такой ситуации является отсутствие подключения к Интернету. Хорошей практикой в таких случаях является уведомление пользователя о наличии соединения с Интернетом...

#frontend #js

CSS: псевдокласс :scope

Селектор :scope появился в 2023 году и служит для определения области действия стилей в CSS. Если :scope относится к корневому уровню разметки страницы (обычно это блок html), он полностью заменяет :root. Например:

:scope {
  background-color: orange;
}

Использование :scope внутри блока @scope позволит применить стили четко и целенаправленно, опираясь на логику наименований классов. Например, для HTML-кода:

<div class="light">
  <p><a href="#">light</a></p>
</div>
<div class="dark">
  <p><a href="#">dark</a></p>
</div>

можно применить следующие стили:

@scope (.light) {
  :scope {
    background-color: black;
  }

  a {
    font-size : 2rem;
  }
}

@scope (.dark) {
  :scope {
    background-color: yellow;
    color: purple;
  }

  a {
   font-size : 4rem;
  }

#frontend #css

CSS: @container

Правило @container позволяtт динамически управлять стилями дочернего HTML-элемента в зависимости от размера родительского контейнера, содержащего этот элемент. Запросы для контейнеров работают также как и медиа-запросы. Чтобы воспользоваться всеми преимуществами at-rule правила @container, в первую очередь, необходимо определить контекст контейнера родительского элемента, с помощью свойства container-type:

1. container-type: size;: это значение свойства позволяет выполнять запросы как по ширине, так и по высоте;
2. container-type: inline-size;: это значение свойства, позволяет выполнять запросы только по ширине.

<div class="post">
    <div class="card">
        <h2>Наименование</h2>
        <p>Описание товара</p>
    </div>
</div>

.post {
    container-type: size;
}

.card h2 {
    font-size: 1em;
    color: blue;
}

@container (min-width: 700px) {
    .card h2 {
        font-size: 5em;
        color: purple;
    }
}

#frontend #css

HTML: submit за пределами формы

Далеко не всегда кнопка отправки формы должна находиться в пределах родительского блока form. Спецификация HTML позволяет размещать ее в любом месте на странице сайта. Для того чтобы кнопка submit корректно работала за пределами формы нужно для элемент button type="submit" указать атрибут form со значением равным id формы:

<form id="newsletterForm">
  <label for="email">Email:</label>
  <input type="email" name="email" placeholder="Email" />
</form>

<button type="submit" form="newsletterForm">Submit!</button>

Кнопка не является частью формы, но по-прежнему работает.

#frontend #html

CSS: псевдокласс :has

В CSS псевдоклаcc :has дает возможность создавать правила для родительского HTML-элемента, содержащего определенный дочерний элемент. Например, такой фрагмент CSS:

p:has(a) {
    font-size: 40px;
}

будет работать только для p, имеющих вложенную ссылку a:

<p>Тут находится <a href="/">ссылка</a></p>

#frontend #css

CSS: color-mix и color-contrast

В CSS появились новые возможности управления значением <color>: color-mix() и color-contrast()

Пока еще экспериментальная функциональная нотация color-contrast() берет указанное значение цвета и сравнивает его с остальным списком, выбирая наиболее контрастное значение:

color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)

Функциональная нотация color-mix() принимает два цветовых значения и возвращает результат их смешивания в заданном цветовом пространстве и количестве.

color-mix(in lab, plum 60%, #f00 50%)

#frontend #css

JavaScript: удаление гласных

Рассмотрим изящный способ удаления всех гласных в строке с помощью JavaScript. Идея состоит в том, чтобы, получить исходную строку и вернуть её без букв аоуэыияеёю:

const input = 'Регулярное выражение';
const removeVowels = input.replace(/[аоуэыияеёю]/gi, '');
console.log(removeVowels);

Это работает. И да, это весь код, который нужен, но давайте рассмотрим подробности:

1. используем функцию replace для замены определенного совпадения.
2. это аргументы функции, для которых мы будем использовать регулярное выражение и значение для замены.

Чтобы внести ясность рассмотрим более простой пример, в котором заменим букву пустой строкой:

const removeVowels = input.replace('a', '');

console.log(removeVowels);

Однако, можно заметить, что это работает только для первого вхождения и, конечно, только для одной буквы за раз. Вот тут-то и пригодится регулярное выражение:

1. регулярное выражение заключается в обратные слеши.
2. сопоставление шаблонов задается с помощью квадратных скобок, между которыми указываются сопоставляемые буквы.
3. в конце выражения пишем gi, что означает global ignore (global указывает на применение выражения к каждому случаю найденного совпадения, а не только к первому, ignore позволяет осуществлять поиск без учета регистра)

#frontend #interview #js

JavaScript: производительность

Многие из нас пишут на JavaScript. Создаваемый нами код влияет на производительность всего приложения и эффективность его взаимодействия с пользователями. Именно поэтому так важно оптимизировать код для обеспечения достаточной производительности...

#frontend #js

CSS: анимация SVG

Итак, с помощью CSS и SVG можно создать суперкрутой эффект рисования картинки по контуру...

#frontend #css #svg #animation

CSS: управление контуром SVG

С помощью CSS можно не только создавать эффект рисования контура изображения, но и динамически изменять саму картинку. Например: направление кривой контура...

#frontend #css #svg #animation

Tailwind: @apply

Немногие знают, что с помощью директивы @apply классы-утилиты можно объединять в пользовательские классы. И эта возможность кардинально меняет правила игры в Tailwind, когда дело касается чистоты HTML-кода и повторного использования стилей:

.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

такой подход позволяет не загромождать HTML-структуру страницы, а просто написать:

<button class="btn-primary">Нажми меня!</button>

Применяйте @apply для повторно используемых компонентов. Это позволит сделать HTML-разметку страницы более понятной и хорошо читаемой.

#frontend #css #tailwind

Laravel 11. Первый проект: 01. Установка

В первом уроке мы создадим новый проект для изучения Laravel. Официальной документация по установке Laravel содержит большой и исчерпывающий объем информации. Следует знать, что для установки Laravel существует несколько способов. Официальная документация Laravel преимущественно посвящена использованию инструмента командной строки Laravel Sail в сочетании с Docker. Но мы не будем использовать Sail в данном курсе. Так как для его использования требуется понимание принципов работы с Docker. А для новичков это может стать очередной преградой на пути освоения Laravel...

#backend #php #laravel #lesson

Tailwind: пользовательские условия

Хорошо реализованная возможность кастомизации является одной из лучших особенностей Tailwind CSS. Вся магия происходит в файле tailwind.config.js. Давайте рассмотрим как создавать пользовательские условия для применения стилей на примере условия, при котором стили можно будет применять только в случае, когда родительский элемент имеет определенный класс:

module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active', 'group-focus'],
    }
  }
}

Это решение позволяет использовать такие классы, как group-focus:bg-blue-500.

#frontend #css #tailwind