Frontend | Вопросы собесов

🤔

За что отвечает justify-content и align-tiems у flexbox контейнера?

В CSS Flexbox, свойства justify-content и align-items используются для управления выравниванием и распределением элементов внутри flex-контейнера.

🚩

`justify-content`

Свойство justify-content определяет, как flex-элементы должны быть распределены вдоль основной оси (main axis) контейнера. Основная ось по умолчанию — это горизонтальная ось для flex-direction: row и вертикальная ось для flex-direction: column.

🟠

flex-start
Элементы прижаты к началу контейнера.

.container {
    display: flex;
    justify-content: flex-start;
}

🟠

flex-end
Элементы прижаты к концу контейнера.

.container {
    display: flex;
    justify-content: flex-end;
}

🟠

center
Элементы выровнены по центру контейнера.

.container {
    display: flex;
    justify-content: center;
}

🟠

space-between
Элементы равномерно распределены, первый элемент прижат к началу, последний элемент — к концу контейнера.

.container {
    display: flex;
    justify-content: space-between;
}

🟠

space-around
Элементы равномерно распределены с равным отступом вокруг них.

.container {
    display: flex;
    justify-content: space-around;
}

🟠

space-evenly
Элементы равномерно распределены с равными отступами между ними и краями контейнера.

.container {
    display: flex;
    justify-content: space-evenly;
}

🚩

`align-items`

Свойство align-items определяет, как flex-элементы должны быть выровнены вдоль поперечной оси (cross axis) контейнера. Поперечная ось перпендикулярна основной оси: вертикальная ось для flex-direction: row и горизонтальная ось для flex-direction: column.

🟠

flex-start
Элементы прижаты к началу поперечной оси контейнера.

.container {
    display: flex;
    align-items: flex-start;
}

🟠

flex-end
Элементы прижаты к концу поперечной оси контейнера.

.container {
    display: flex;
    align-items: flex-end;
}

🟠

center
Элементы выровнены по центру поперечной оси контейнера.

.container {
    display: flex;
    align-items: center;
}

🟠

baseline
Элементы выровнены по их базовой линии текста.

.container {
    display: flex;
    align-items: baseline;
}

🟠

stretch
Элементы растянуты, чтобы заполнить контейнер вдоль поперечной оси (по умолчанию).

.container {
    display: flex;
    align-items: stretch;
}

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍22❤1

5.82K views09:10

Frontend | Вопросы собесов

🤔 Какие способы изоляции стилей ты знаешь?

Изоляция стилей может быть достигнута с помощью CSS-модулей, которые создают уникальные имена классов для предотвращения конфликта стилей. Shadow DOM изолирует стили внутри веб-компонентов, не позволяя им влиять на внешний код. Также можно использовать атрибуты, такие как `scoped` для стилей внутри Vue.js или инкапсуляцию стилей с помощью `

@import

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍21🔥14🤯10❤1

5.48K views16:10

Frontend | Вопросы собесов

🤔

Как убрать маркер у списка?

Чтобы убрать маркер у списка, используйте свойство CSS list-style-type со значением none. Это свойство применяется к элементам списка <ul> (ненумерованный список) или <ol> (нумерованный список) и убирает маркеры (буллеты) у элементов списка <li>.

Пример использования HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Список без маркеров</title>
    <style>
        .no-marker {
            list-style-type: none; /* Убирает маркеры */
            padding: 0; /* Убирает отступы */
            margin: 0; /* Убирает внешние отступы */
        }
    </style>
</head>
<body>
    <ul class="no-marker">
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
</body>
</html>

Пример использования CSS

.no-marker {
    list-style-type: none; /* Убирает маркеры */
    padding: 0; /* Убирает отступы */
    margin: 0; /* Убирает внешние отступы */
}

🟠

list-style-type: none;
Убирает маркеры у элементов списка <li>.

🟠

padding: 0;
Убирает внутренние отступы у списка. Это полезно, поскольку некоторые браузеры добавляют отступы по умолчанию.

🟠

margin: 0;
Убирает внешние отступы у списка.

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍20😁5❤1

5.72K views09:10

Frontend | Вопросы собесов

🤔Различие методов call apply bind?

Методы `call` и `apply` выполняют функцию с заданным контекстом `this`, но `call` принимает аргументы по отдельности, а `apply` — в виде массива. Метод `bind` возвращает новую функцию с предустановленным значением `this`, которую можно вызвать позже. В отличие от `call` и `apply`, `bind` не вызывает функцию немедленно. `bind` часто используется для создания копий функций с привязкой контекста.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍35🔥10❤5

5.43K views16:10

Frontend | Вопросы собесов

0:09

This media is not supported in your browser

VIEW IN TELEGRAM

Программист — лекарство от больных тимлидов, тупых багов и тех самых митов в 10 утра ☠️

Здесь собирают лучшие мемы про айтишников, чтобы спасти вашу психику от died'осов на работе.

Идеально зачиллить вечерком и скинуть друзьям: @progeri

💊5👍1😁1

5.11K views07:04

Frontend | Вопросы собесов

🤔

Какие бывают значение у background-size?

Свойство CSS background-size определяет размеры фонового изображения элемента. Это свойство позволяет контролировать, как фоновое изображение масштабируется и располагается внутри элемента.

🟠

auto
Исходный размер фонового изображения. Это значение по умолчанию.

background-size: auto;

🟠

cover
Масштабирует фоновое изображение так, чтобы оно полностью покрывало контейнер. Изображение будет обрезано, чтобы сохранить свои пропорции.

background-size: cover;

🟠

contain
Масштабирует фоновое изображение так, чтобы оно полностью помещалось внутри контейнера, сохраняя свои пропорции. Изображение будет уменьшено или увеличено, чтобы вписаться в контейнер без обрезки.

background-size: contain;

🟠

Ширина и высота в пикселях
Определяет конкретные размеры изображения в пикселях.

background-size: 100px 50px;

🟠

Процентные значения
Определяет размер изображения в процентах от размера контейнера.

background-size: 50% 25%;

🟠Ширина
Устанавливает ширину изображения, высота будет автоматически установлена для сохранения пропорций.

background-size: 100px;

🟠

Краткий синтаксис
Устанавливает ширину и высоту одновременно.

background-size: width height;

🚩

Примеры использования

Масштабирование изображения с cover

.element {
    background-image: url('example.jpg');
    background-size: cover;
}

Масштабирование изображения с contain

.element {
    background-image: url('example.jpg');
    background-size: contain;
}

Конкретные размеры в пикселях

.element {
    background-image: url('example.jpg');
    background-size: 100px 50px;
}

Процентные значения

.element {
    background-image: url('example.jpg');
    background-size: 50% 50%;
}

Одно значение (ширина)

.element {
    background-image: url('example.jpg');
    background-size: 100px;
}

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍21🔥1

5.32K views09:10

Frontend | Вопросы собесов

🤔

В чём разница между классической функцией и стрелочной?

Классические функции создают собственное значение `this`, зависящее от того, как они вызываются (например, контекст объекта или глобальный объект). Стрелочные функции не имеют собственного `this` и используют значение `this` из окружения, в котором они были определены. Также у стрелочных функций нет доступа к объекту `arguments` и их нельзя использовать в качестве конструктора. Стрелочные функции чаще всего используются для упрощённого написания функций с замыканиями.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍30🔥9❤2💊1

5.3K views16:10

Frontend | Вопросы собесов

🤔

!Important для чего используется?

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

🚩

Как работает

Чтобы применить !important, добавьте его в конце свойства и перед точкой с запятой:

selector {
    property: value !important;
}

В этом примере текст в параграфе с классом important будет зеленым, несмотря на то, что есть другие правила, определяющие цвет текста для <p> и <p class="special">.

/* Без использования !important */
p {
    color: red;
}

p.special {
    color: blue;
}

/* С использованием !important */
p.important {
    color: green !important;
}

🚩

Почему используется

🟠

Переопределение каскада
Иногда вам нужно, чтобы определенное правило CSS применялось независимо от других стилей, которые могут быть установлены для этого элемента. !important позволяет вам это сделать.

🟠

Временные исправления
В крупных проектах !important может быть полезен для временного исправления или обхода конкретных стилей без необходимости изменять существующие файлы стилей.

В этом примере текст в первом параграфе будет красным, так как применится правило .normal. Во втором параграфе текст будет синим, так как правило .override с !important переопределяет правило .normal.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        .normal {
            color: red;
        }
        .override {
            color: blue !important;
        }
    </style>
</head>
<body>
    <p class="normal">This text is red.</p>
    <p class="normal override">This text is blue.</p>
</body>
</html>

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍14❤2🔥1

5.13K views09:10

Frontend | Вопросы собесов

🤔

Что такое макро и микро задачи?

Макро-задачи (macro-tasks) — это крупные задачи, такие как события ввода-вывода, таймеры или сетевые запросы, которые планируются в основной очереди событий. Микро-задачи (micro-tasks) — это задачи меньшего приоритета, которые выполняются сразу после завершения текущего блока кода, но до выполнения следующих макро-задач (например, `Promise` или `MutationObserver`). Микро-задачи всегда выполняются перед макро-задачами, что позволяет им завершаться быстрее. Это важное отличие в управлении асинхронным кодом и приоритизацией событий.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍34🔥14

5.41K views16:10

Frontend | Вопросы собесов

🤔

Как работают медиа запросы про мобильные приложения?

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

🚩

Основные аспекты

🟠

Ширина экрана (Viewport Width)
Один из наиболее часто используемых параметров для медиа-запросов — ширина экрана устройства.

@media (max-width: 600px) {
    /* Стили для мобильных устройств */
}

🟠

Ориентация (Orientation)
Медиа-запросы могут применяться в зависимости от ориентации устройства: портретная (вертикальная) или альбомная (горизонтальная).

@media (orientation: portrait) {
    /* Стили для портретной ориентации */
}

@media (orientation: landscape) {
    /* Стили для альбомной ориентации */
}

🟠

Разрешение экрана (Resolution)
Медиа-запросы могут основываться на разрешении экрана, что полезно для ретина-дисплеев и других устройств с высоким разрешением.

@media (min-resolution: 2dppx) {
    /* Стили для экранов с высоким разрешением */
}

🚩

Примеры

Изменение стилей для мобильных устройств

/* Основные стили для всех устройств */
body {
    font-size: 16px;
    background-color: white;
}

/* Стили для мобильных устройств (максимальная ширина 600px) */
@media (max-width: 600px) {
    body {
        font-size: 14px;
        background-color: lightgrey;
    }
}

Адаптация макета для планшетов и мобильных устройств

/* Основные стили для десктопов и планшетов */
.container {
    display: flex;
    flex-direction: row;
}

/* Стили для планшетов (ширина 601px до 1024px) */
@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }
}

/* Стили для мобильных устройств (максимальная ширина 600px) */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
        font-size: 12px;
    }
}

🚩

Подходы

🟠

Мобильный подход (Mobile-First)
В этом подходе основные стили пишутся для мобильных устройств, а затем добавляются медиа-запросы для планшетов и десктопов.

/* Основные стили для мобильных устройств */
body {
font-size: 14px;
}

/* Стили для планшетов и десктопов */
@media (min-width: 600px) {
body {
font-size: 16px;
}
}

@media (min-width: 1024px) {
body {
font-size: 18px;
}
}

🟠

Десктопный подход (Desktop-First)
В этом подходе основные стили пишутся для десктопов, а затем добавляются медиа-запросы для планшетов и мобильных устройств.

/* Основные стили для десктопов */
body {
font-size: 18px;
}

/* Стили для планшетов */
@media (max-width: 1024px) {
body {
font-size: 16px;
}
}

/* Стили для мобильных устройств */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍25❤3🔥2

5.43K views09:10

Frontend | Вопросы собесов

🤔 Что такое this?

`this` в JavaScript — это ключевое слово, которое указывает на текущий контекст исполнения функции или объекта. Значение `this` зависит от того, как вызывается функция: в методе объекта `this` ссылается на объект, в функции вне объекта — на глобальный объект или `undefined` в строгом режиме. В стрелочных функциях `this` не определяется локально, а наследуется от родительской области видимости. Использование `this` позволяет работать с динамическими контекстами.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍38🔥5❤1😁1

5.41K views16:10

Frontend | Вопросы собесов

🤔

Какое свойство используется для перевода текста в заглавные/строчные буквы?

Используется свойство text-transform. Это свойство управляет преобразованием текста и может принимать несколько значений для изменения регистра букв.

🚩

Значения свойства

🟠

none
Оставляет текст в его первоначальном виде, без преобразований.

p {
    text-transform: none;
}

🟠

capitalize
Преобразует первую букву каждого слова в заглавную.

p {
    text-transform: capitalize;
}

🟠

uppercase
Преобразует все буквы текста в заглавные.

p {
    text-transform: uppercase;
}

🟠

lowercase
Преобразует все буквы текста в строчные.

p {
    text-transform: lowercase;
}

🚩

Примеры использования

🟠

Преобразование текста в заглавные буквы

.uppercase {
    text-transform: uppercase;
}

<p class="uppercase">Этот текст будет заглавными буквами.</p>

🟠

Преобразование текста в строчные буквы

.lowercase {
    text-transform: lowercase;
}

<p class="lowercase">ЭТОТ ТЕКСТ БУДЕТ СТРОЧНЫМИ БУКВАМИ.</p>

🟠Преобразование первой буквы каждого слова в заглавную

.capitalize {
    text-transform: capitalize;
}

<p class="capitalize">этот текст будет с заглавными буквами у каждого слова.</p>

🟠

Отсутствие преобразований

.none {
    text-transform: none;
}

<p class="none">Этот текст останется в исходном виде.</p>

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍16❤3

5.32K views09:10

Frontend | Вопросы собесов

🤔 В чём отличие null от undefined?

`null` в JavaScript — это явное указание на отсутствие значения или объекта, тогда как `undefined` означает, что переменная или свойство были объявлены, но не инициализированы. `null` назначается вручную разработчиком, а `undefined` — результат автоматического присваивания переменным, которые ещё не получили значения. В логическом контексте оба значения считаются ложными, но их использование отличается в зависимости от смысла кода. `null` чаще используется для инициализации переменных, ожидающих объект.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍39

4.75K views16:10

Frontend | Вопросы собесов

🤔

Для чего рекомендуется использовать атрибуты data?

В HTML используются для хранения пользовательских данных в элементах страницы. Они предоставляют способ добавления информации к элементам HTML, не вмешиваясь в стандартные атрибуты и структуру HTML. Эти атрибуты позволяют разработчикам ассоциировать произвольные данные с элементами и использовать их в JavaScript для создания более динамичных и интерактивных веб-приложений.

🚩Атрибуты

🟠

Хранение дополнительных данных
Позволяют хранить пользовательские данные непосредственно в HTML-элементах. Это особенно полезно, когда необходимо передавать данные между HTML и JavaScript.

<div id="user" data-user-id="123" data-user-role="admin">...</div>

🟠

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

<button data-action="save" data-target="#form">Save</button>

🟠Разделение данных и представления
Помогают разделять данные и логику от представления, сохраняя HTML-код чистым и структурированным.

🟠

Работа с JavaScript
JavaScript может легко извлекать и использовать данные из атрибутов data-, что упрощает манипулирование элементами страницы.

const user = document.getElementById('user');
const userId = user.getAttribute('data-user-id');
const userRole = user.getAttribute('data-user-role');
console.log(`User ID: ${userId}, Role: ${userRole}`);

🚩

Примеры использования

🟠

Хранение информации о продукте

<div class="product" data-product-id="101" data-product-price="29.99">
    <h2>Product Name</h2>
    <p>Product Description</p>
</div>

const product = document.querySelector('.product');
const productId = product.getAttribute('data-product-id');
const productPrice = product.getAttribute('data-product-price');
console.log(`Product ID: ${productId}, Price: ${productPrice}`);

🟠

Управление действиями кнопки

<button data-action="submit" data-target="#form">Submit</button>

const button = document.querySelector('button');
button.addEventListener('click', function() {
    const action = this.getAttribute('data-action');
    const target = this.getAttribute('data-target');
    console.log(`Action: ${action}, Target: ${target}`);
});

🟠Хранение состояния элемента

<div id="toggle" data-state="collapsed">Click to Expand</div>

const toggle = document.getElementById('toggle');
toggle.addEventListener('click', function() {
    const state = this.getAttribute('data-state');
    if (state === 'collapsed') {
        this.setAttribute('data-state', 'expanded');
        this.textContent = 'Click to Collapse';
    } else {
        this.setAttribute('data-state', 'collapsed');
        this.textContent = 'Click to Expand';
    }
});

🚩Плюсы

➕

Простота и гибкость
Легко добавлять и изменять данные без изменения HTML-структуры.

➕

Совместимость с существующими инструментами
Атрибуты data- не влияют на стандартные функции браузеров и инструментов разработки.

➕

Поддержка валидации HTML
HTML5 атрибуты data- валидны и не нарушают спецификацию.

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍17❤6

5.09K views09:10

Frontend | Вопросы собесов

🤔 Какие бывают хуки?

В React хуки — это специальные функции, которые позволяют "подключаться" к состоянию и жизненному циклу функциональных компонентов. Основные хуки включают `useState` для работы с состоянием, `useEffect` для выполнения побочных эффектов, и `useContext` для доступа к контексту. Также есть пользовательские хуки, которые можно создавать для повторного использования логики между компонентами. Хуки позволяют использовать функциональные компоненты так же эффективно, как и классовые.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍27🔥7💊2

5.17K views16:10

Frontend | Вопросы собесов

🤔

Как стилизовать инпут для загрузки файлов?

Элемент <input type="file"> может быть сложно из-за его специфичного и нестандартного поведения в разных браузерах. Однако, с помощью CSS и небольшого количества JavaScript, можно создать стилизованный компонент для загрузки файлов, который будет выглядеть и работать одинаково во всех браузерах.

🚩

Для загрузки файлов HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom File Input</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="file-input">
        <input type="file" id="file" class="file-input__input">
        <label for="file" class="file-input__label">
            <span class="file-input__button">Choose a file</span>
            <span class="file-input__name">No file chosen</span>
        </label>
    </div>
    <script src="scripts.js"></script>
</body>
</html>

🚩

Для загрузки файлов CSS

/* Стили для контейнера файла */
.file-input {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
    font-family: Arial, sans-serif;
}

/* Скрыть стандартный инпут для файла */
.file-input__input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Стили для кастомного лейбла */
.file-input__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f8f8f8;
    cursor: pointer;
}

/* Стили для кнопки выбора файла */
.file-input__button {
    background-color: #007bff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 10px;
}

/* Стили для отображения имени файла */
.file-input__name {
    color: #999;
}

🚩Для загрузки файлов JavaScript

document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.querySelector('.file-input__input');
    const fileName = document.querySelector('.file-input__name');

    fileInput.addEventListener('change', function () {
        if (fileInput.files.length > 0) {
            fileName.textContent = fileInput.files[0].name;
        } else {
            fileName.textContent = 'No file chosen';
        }
    });
});

🟠

HTML
Создается структура с элементом <input type="file">, который скрыт с помощью CSS. <label> используется для создания пользовательского интерфейса. Лейбл связан с инпутом через атрибут for.

🟠

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

🟠

JavaScript
Слушает событие change на инпуте для файла. При выборе файла обновляет текст внутри элемента с классом .file-input__name на имя выбранного файла.

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍18❤8🔥1

5.3K views09:10

Frontend | Вопросы собесов

🤔 Что такое мемоизация?

Мемоизация — это техника оптимизации, при которой результаты выполнения функций кэшируются для ускорения последующих вызовов с теми же аргументами. В JavaScript мемоизация часто используется для сложных вычислений или рендеринга, где повторное выполнение одной и той же операции может быть дорогим. Функции, использующие мемоизацию, сохраняют результаты в памяти и возвращают их при тех же входных данных без повторного вычисления. Это улучшает производительность, особенно при работе с большими данными.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍37🔥14❤3

5.39K views16:10

Frontend | Вопросы собесов

🤔

Что такое селектор атрибутов?

Позволяют выбирать элементы HTML на основе наличия, значения или частичного соответствия атрибутов. Это мощный инструмент, который делает стилизацию элементов более гибкой и точной.

🚩

Виды

🟠

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

/* Выбирает все элементы с атрибутом title */
[title] {
    color: blue;
}

🟠

Селектор по точному значению атрибута
Выбирает элементы, атрибут которых имеет точное указанное значение.

/* Выбирает все элементы с атрибутом type, равным "submit" */
input[type="submit"] {
    background-color: green;
}

🟠

Селектор по наличию значения в списке значений атрибута
Выбирает элементы, атрибут которых содержит указанное значение в списке, разделенном пробелами.

/* Выбирает все элементы с классом, включающим "btn" */
[class~="btn"] {
    font-weight: bold;
}

🟠

Селектор по начальной части значения атрибута
Выбирает элементы, атрибут которых начинается с указанного значения.

/* Выбирает все элементы, значение атрибута href которых начинается с "https" */
a[href^="https"] {
    color: red;
}

🟠

Селектор по конечной части значения атрибута
Выбирает элементы, атрибут которых заканчивается на указанное значение.

/* Выбирает все элементы, значение атрибута href которых заканчивается на ".pdf" */
a[href$=".pdf"] {
    text-decoration: underline;
}

🟠

Селектор по вхождению значения в атрибут
Выбирает элементы, атрибут которых содержит указанное значение в любом месте.

/* Выбирает все элементы, значение атрибута href которых содержит "example" */
a[href*="example"] {
    color: orange;
}

🚩

Примеры использования селекторов атрибутов

Стилизация всех изображений с атрибутом alt

img[alt] {
    border: 2px solid blue;
}

Стилизация ссылок, ведущих на внешние сайты

a[href^="http"] {
    color: red;
}

Стилизация полей ввода с определенным типом

input[type="text"] {
    border: 1px solid gray;
}

Стилизация элементов с определенным классом

[class~="button"] {
    padding: 10px;
    background-color: lightgray;
}

🚩

Комбинированные селекторы

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

/* Выбирает все кнопки с классом btn и типом submit */
button.btn[type="submit"] {
    background-color: green;
    color: white;
}

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍33🔥6

5.48K views09:10

Frontend | Вопросы собесов

🤔 В чём отличие хранения данных в local storage от куки?

`localStorage` хранит данные на стороне клиента и позволяет сохранять информацию в виде ключ-значение без ограничения по времени, пока пользователь явно не удалит данные. Куки же могут передаваться на сервер при каждом запросе, имеют ограниченный объём (до 4KB) и срок действия. `localStorage` более удобен для долгосрочного хранения данных, которые не должны передаваться на сервер, тогда как куки полезны для передачи информации, такой как аутентификационные токены. `localStorage` работает только на клиентской стороне, куки же могут быть доступны и на стороне сервера.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥35👍16

5.22K views16:10

Frontend | Вопросы собесов

🤔

Как изменить стили кнопок с атрибутом disabled?

C атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.

🚩Пример использования

🟠Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут disabled.

button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
    opacity: 0.6; /* Уменьшает непрозрачность */
}

🟠

Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии disabled.

button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🚩Полные примеры

С HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disabled Button Styling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button>Active Button</button>
    <button disabled>Disabled Button</button>
</body>
</html>

С CSS

/* Стили для активных кнопок */
button {
    background-color: blue;
    color: white;
    border: 1px solid #000;
    padding: 10px 20px;
    cursor: pointer;
}

/* Стили для кнопок с атрибутом disabled */
button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🟠

Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.

/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
    background-color: darkgray;
    color: black;
    border: 1px dashed #999;
    cursor: not-allowed;
    opacity: 0.7;
}

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍17❤1

4.88K views09:10

About

Blog

Apps

Platform