Рубрика «Обучение»

Как изменить 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..

12 редко используемых веб-API для вашего сайта

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

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

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

Веб-API около сотни, а вы используете лишь 5% из них. Давайте запускать в ход остальные 95%!

Photo by Studio Republic on Unsplash

Нырнув в темные глубины спецификаций, я понял, что многие технологии остаются незамеченными. Цель этой статьи — вытащить их на свет божий. Я на практических примерах покажу, что многие API действительно стоит попробовать!

Каждый раздел этой статьи будет посвящен отдельному API и снабжен примером, демонстрирующим практический юзкейс.

От редакции Techrocks: о том, что такое API, можно почитать в статьях:

Что такое API: объяснение на пальцахЧто такое API: подробно и простыми словами

Вертикальный режим

Экран слишком узкий. Попробуйте открыть в горизонтальном режиме.

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

Разумеется, ..

Генераторы 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().

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

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

LocalStorage — локальное хранилище в JavaScript

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

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

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

На заре интернета для хранения данных вам нужен был сервер. Сегодня локальное хранилище (LocalStorage) позволяет хранить данные в браузерах и приложениях, не обращаясь к бэкенд-серверу.

В этой статье я расскажу, как LocalStorage применяется в теории и на практике.

Давайте разберемся с веб-хранилищем

Прежде чем перейти к основной теме, давайте остановимся на определении веб-хранилища. Веб-хранилище — одна из наилучших функций HTML5. Она позволяет веб-приложениям сохранять данные локально, в браузере пользователя.

Веб-хранилище имеет две основные формы — локальное и сессионное хранилище (соотв. LocalStorage и Session Storage). Ключевая разница между ними состоит в том, что данные, сохраненные в LocalStorage, остаются в браузере до тех пор, пока их оттуда не удалят намеренно. А вот данные, сохраненные в Session Storage, удаляются после закрытия вкладки или окна..

Чем отличаются параметры и аргументы функций

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

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

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

Динамические значения, которые передаются в JavaScript-функцию, могут меняться при вызове этой функции в разных местах кода. Мы называем эти данные параметрами и аргументами, причем не все хорошо помнят, чем одни отличаются от других.

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

Функции в JavaScript

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

Функции — переиспользуемый код: его можно применять где угодно в программе. Благодаря им отпадает необходимость в бесконечном повторении одинакового кода в разных местах.

Вот пример функции без всяких параметров и аргументов:

function add(){
return 2 + 3
}

add()

Сначала идет объявление функции add. Затем она вызывается (последняя строчка кода). Результат раб..

В чем разница между : и :: в CSS?

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

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

Я годами гуглила «чем отличается : от :: в CSS», прежде чем эта информация наконец осела у меня в голове. Звучит знакомо? Тогда эта статья для вас.

Если вы хотите быстро получить ответ на вопрос из заголовка статьи, то вот он:

: относится к псевдоклассам, таким как :visited или :hover:: — для псевдоэлементов, таких как ::first-of-type или ::after

А если хотите более подробных объяснений, давайте рассмотрим примеры.

Что означает «псевдо»?

Приставка «псевдо» указывает на то, что нечто является поддельным, ненастоящим. Но как могут быть поддельными классы или элементы? Псевдоклассы и псевдоэлементы не прописаны в HTML вручную и не появляются в DOM (или дереве документа). Их создает CSS!

Что такое псевдокласс?

Псевдоклассы позволяют вам выбирать элементы в CSS, основываясь на информации не из HTML страницы. Например, на информации, хранящейся в браузере. Доступ к псевдоклассам..

Большое О для самых маленьких

Честно говоря, когда я только начала изучать программирование, я долго прокрастинировала и не бралась за большое О. Эта статья для тех, кто испытывает тот же священный трепет.

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

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

базовые операции — самые эффективныеповторяющиеся операции (циклы) вызывают больше опасений по части эффективностипроизводительность вложенных циклов наиболее сомнительная.

Вот честно: все сводится к этим основным положениям. Не слишком страшно, правда? Также есть целая категория вещей, о которых можно вообще не беспокоиться, они точно не ухудшат производительность кода. К ним относятся:

основные математич..

7 интересных, но редко используемых элементов HTML

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

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

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

1. meter и progress

Использование элемента progress — семантически правильный способ отобразить индикатор выполнения.

А элемент meter — это progress на стероидах. Помимо отображения скалярного измерения в пределах известного диапазона, он позволяет указать нижний, верхний и оптимальный диапазоны значений.

2. sup и sub

С помощью этих элементов можно добавлять верхние и нижние индексы, такие как x² или x₀.

3. datalist

datalist позволяет добавить предложения автодополнения в ваши элементы input.

Примечания:

Предложения автодополнения можно добавлять не только в текстовые input. Их можно использовать и там, где нужно выбрать цвет, дату, вр..