Рубрика «Работа»

Как изменить CSS-стили при помощи JavaScript

Хочешь проверить свои знания по фронтенду?

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

Решать задачи

×

Фото автора Format

Как изменить CSS-стили? Ответ очевиден — отредактировать CSS-файл. Возможно, после этого понадобится компиляция. Затем нужно обновить стили во время выполнения, изменив атрибуты элемента, такие как class и aria-*.

Хотя этот ответ неполный, подумайте над следующими вопросами:

Как обновить стили во время выполнения, основываясь на взаимодействии с пользователем, а не на предустановленных значениях? Сгенерировать уникальные имена классов для каждой возможной комбинации цветов нереально.Что, если у вас нет доступа к таблицам стилей или HTML? Например, если сайт сгенерирован конструктором сайтов со сторонними CSS-файлами, изобилующими свойствами !important.

В этой статье мы рассмотрим четыре способа обновить CSS-стили при помощи JavaScript. Также мы кратко разберем, в каких случаях эти способы стоит применять. Наконец, мы оценим их с точки зрен..

Как закомментировать CSS (и как писать комментарии)

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Комментарии — составляющая часть кода на любом языке программирования. Есть возможность комментирования и в CSS.

Если вы работаете в команде и занимаетесь большим проектом, вам нужна возможность как-то пояснять свой код товарищам. Тут вам на помощь придут комментарии.

Таблицы стилей со временем могут стать очень сложными и объемными. Поэтому систематическое добавление комментариев должно стать общепринятой практикой в команде.

В этой статье мы рассмотрим, как добавлять встроенные и многострочные комментарии в CSS.

Как закомментировать CSS

Чтобы закомментировать часть CSS-кода, вам понадобится обычный слэш (/) и астериск (*).

Для добавления как встроенного, так и многострочного комментария в CSS вы начинаете со слэша и астериска (/*). Их же, но в обратном порядке (*/) вы ставите в конце комментария.

Вот как выглядит встроенный (строчный) комментарий в CSS:

/* This is an in..

Генераторы CSS-кода: самая полная коллекция

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Если вы уже некоторое время занимаетесь созданием сайтов, вполне вероятно, что вас периодически посещают следующие мысли:

как мне это повторить?что это за сниппет кода?должен быть способ сделать это проще и быстрее…я знаю, что уже писал такой код…где я нашел тот CSS-инструмент?

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

Содержание:

МультитулыАнимацииФоныГраницыТени блоковКнопкиРазделителиФильтрыГрадиентыМакетПалитрыГенераторы треугольниковГенераторы лент и плашекСтили типографииГенераторы подчеркиванияПрочее

Мультитулы

Web Code Tools

Несколько генераторов кода, включая генераторы CSS, HTML, Schema Markup и метатегов.

Html-css-js

Несколько CSS-генераторов, таких как генераторы градиента, столбцов, стилей таблиц, Box Transform, Text Shadow.

CSS 3.0 Make..

Методы event.preventDefault() и event.stopPropagation()

Хочешь проверить свои знания по фронтенду?

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

Решать задачи

×

Браузеры имеют установленные по умолчанию варианты поведения в различных случаях.

Например, когда пользователь нажимает кнопку «Отправить», по умолчанию форма отправляется к указанному обработчику.

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

В некоторых случаях вам может понадобиться перекрыть эти установки по умолчанию. В этой статье мы познакомимся с методами event.preventDefault() и event.stopPropagation(). С их помощью мы будем отменять некоторые дефолтные действия браузера.

event.preventDefault()

Этот метод предотвращает дефолтные действия, предпринимаемые браузером при запуске события.

Давайте рассмотрим несколько примеров таких действий, установленных по умолчанию, и способы их предотвращения при помощи event.preventDefault().

Как отменить дефолтную отправку формы

Когда пользовател..