Javascript css: CSS для JavaScript-разработчика

CSS и JavaScript доступность — лучшие практики — Изучение веб-разработки

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

По сравнению с HTML, влияние CSS и JavaScript на доступность веб-страниц не столь велико, однако они всё равно способны внести свой вклад — как положительный, так и отрицательный. Иными словами, важно ознакомиться с рекомендациями по использованию CSS и JavaScript без риска случайно сломать доступность ваших веб-страниц.

Начнём наш обзор с CSS.

Правильная семантика и ожидаемое пользователем поведение

При помощи CSS мы можем заставить любой HTML-элемент выглядеть как угодно, однако это не означает, что следует так делать. Как мы часто упоминали в статье HTML: Хорошая основа для доступности, для каждой задачи всегда стоит использовать соответствующий семантический элемент. Если не следовать данному правилу, то могут возникнуть проблемы и неудобства для всех, а в особенности для людей с ограниченными возможностями здоровья. Правильная семантика также тесно связана с ожидаемым пользователями поведением — элементы выглядят и ведут себя определенным образом, в соответствии с задачами, которые они решают. Внешний вид и поведение элементов интерфейса часто универсальны между разными сайтами и даже браузерами — пользователи привыкают к этому и им проще ориентироваться в интерфейсах.

Например, пользователь скринридера не сможет передвигаться по странице с помощью заголовков, если разработчик не разметит контент корректно с их помощью. Аналогично, если заголовок стилизован так, что вовсе не распознается как заголовок, то он теряет своё визуальное значение.

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

«Стандартная» структура текстового контента

Заголовки, параграфы и списки — это основа текстового контента веб-страницы:

<h2>Заголовок</h2>

<p>Параграф</p>

<ul>
  <li>В моём списке</li>
  <li>два элемента.</li>
</ul>

Типичные стили для такого контента могут выглядеть следующим образом:

h2 {
  font-size: 5rem;
}

p, li {
  line-height: 1.5;
  font-size: 1.6rem;
}

Следует обратить внимание, что:

• У шрифтов выбраны разумные размер, интерлиньяж, межбуквенное расстояние и прочее, чтобы сделать текстовый контент разборчивым и комфортным для чтения.
• Заголовки заметно отличаются от основного текста, например имеют такой же крупный размер шрифта и полужирное начертание, как стандартная стилизация. Списки выглядят как списки.
• Цвет текста должен быть достаточно контрастен относительно цвета фона.

 Для более подробной информации смотрите Основы редактирования текста в HTML и Стилизация текста.

Акцентированный текст

Строчный элемент, который акцентирует особое внимание на содержащемся в нём тексте:

<p>Вода <em>очень горячая</em>.</p>

<p>Собирающиеся на поверхности капельки воды называются <strong>конденсатом</strong>.</p>

Возможно, нам понадобится добавить цвета акцентированному тексту:

strong, em {
  color: #a60000;
}

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

Аббревиатуры

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

<p>Веб-контент верстается с помощью <abbr title="Hypertext Markup Language">HTML</abbr>.</p>

И вновь, возможно, нам понадобится немного стилизовать наши аббревиатуры:

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

Ссылки

Гиперссылки помогают нам переходить из одного места в сети в другое:

<p>Посетите <a href="https://www.mozilla.org">домашнюю страницу Mozilla</a>.</p>

Ниже приведена базовая стилизация для ссылок:

a {
  color: #ff0000;
}

a:hover, a:visited, a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}

Стандартные соглашения по стилизации ссылок — подчёркивание и отличный от стандартного цвет (по умолчанию, синий) в обычном состоянии, другой цвет в случае, если ссылка ранее была посещена (по-умолчанию, фиолетовый) и еще один цвет для состояния нажатости (по-умолчанию, красный). Кроме того при наведении указателя мыши на ссылку указатель начинает отображаться в виде руки, а также ссылка выделяется, когда находится в фокусе (при перемещении по странице с помощью клавиши tab) или активна. Изображение ниже показывает выделение в Firefox (пунктирная обводка) и Chrome (синяя обводка):

До тех пор, пока пользователь получает обратную связь при взаимодействии со ссылками, можно проявлять определённую креативность относительно их стилизации. Что-нибудь обязательно должно происходить при изменении состояния. Не следует также отключать стандартную иконку указателя мыши или обводку — она вносит очень важный вклад в доступность для тех, кто при навигации по сайту использует клавитуру.

Формы

Формы — это DOM-элементы, которые позволяют пользователям вводить данные на веб-страницах:

<div>
  <label for="name">Введите имя</label>
  <input type="text" name="name">
</div>

Мы подготовили пример хорошей стилизации формы, который вы можете найти здесь: form-css.html (а также посмотреть вживую).

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

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

Таблицы

Таблицы используются для отображения табличных данных.

Вы можете найти хороший образец HTML и CSS для таблицы в нашем примере: table-css.html (а также посмотреть вживую).

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

Цвета и контраст

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

К счастью, проверить, всё ли в порядке с уровнем контрастности, весьма просто. Существует множество онлайн-инструментов, которые помогут сравнить пару цветов и вычислить значение контрастности. Например, Color Contrast Checker от WebAIM. Это довольно простой в использовании инструмент, который также предоставляет инструкции, как можно добиться соответствия критериям WCAG по контрастности цветов.

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

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

Скрытые элементы

Существует множество ситуаций, когда не нужно показывать сразу весь контент. Например, в нашем прототипе панели вкладок (здесь можно посмотреть исходный код) имеется три секции с информацией, но мы располагаем их одна над другой и предоставляем набор вкладок, которые позволяют при кликах по ним переключаться между секциями (они также доступны при помощи клавиатуры — их можно выбирать клавишами Таб и Enter/Return).

При этом, такой подход никак не мешает пользователям скринридеров — до тех пор, пока контент в вёрстке расположен в правильном порядке, у них не будет никаких проблем. Именно поэтому абсолютное позиционирование (как в примере выше) считается одним из лучших механизмов для визуального скрытия контента.

А вот visibility:hidden и display:none, напротив, использовать для скрытия контента не следует, потому что они скрывают его не только визуально, но и от скринридеров. Поэтому применять эти свойства стоит, только если совсем скрыть контент и является вашей задачей.

Помните, что пользователи могут переопределять стили

Помните, что пользователи могут переопределять ваши стили

У пользователей есть возможность переопределять ваши стили своими, например:

Пользователи могут переопределять стили по множеству причин. Людям со слабым зрением может понадобиться сделать текст крупнее на всех сайтах, которыми они пользуются. А пользователю с монохромазией потребуется перекрасить все сайты в высококонтрастные цвета, которые ему проще различать. Какая бы ни была причина, следует оставлять дизайн сайта достаточно гибким, чтобы подобные изменения в нём работали. Например, важно убедиться, что область с главным контентом будет нормально обрабатывать более крупные размеры шрифта — она не должна просто обрезать текст или совсем ломаться.

При неправильном использовании JavaScript тоже может вредить доступности.

Современный JavaScript — это очень мощный язык, с помощью которого можно делать кучу разных вещей: от простых обновлений пользовательского интерфейса до полноценных 2D- и 3D-игр. Понятно, что нельзя сделать абсолютно любой тип контента доступным на 100% для всех — нужно просто прилагать все усилия, чтобы делать веб-приложения доступными настолько, насколько это возможно.

Сравнительно несложно сделать доступным простой контент — например, текст, изображения, таблицы, формы и кнопки. Вспомним основные тезисы из статьи HTML: Хорошая основа для доступности:

• Хорошая семантика: использование каждого элемента для своей задачи. Следует убедиться, что используются различные типы элементов: заголовки, параграфы, <button>, <a> и так далее.
• Контент должен быть доступен либо как обычный текст, либо как альтернативный текст, например атрибут alt для изображений.

Мы также показали пример использования JavaScript для добавления некоторым элементам возможностей, которых они лишены по умолчанию — смотрите в разделе Добавление доступности с клавиатуры. Такое решение стоит рассматривать только в случае, когда по какой-то причине у вас нет доступа к изменению разметки. Намного надежнее и универсальнее будет использовать для каждой задачи соответствующий элемент. Также улучшить доступность несемантичных JavaScript-виджетов можно использованием WAI-ARIA атрибутов — с их помощью можно добавить некоторой искусственной семантики для пользователей скринридеров. В следующей статье мы рассмотрим эту тему подробнее.

Сложные приложения, например 3D-игры, сделать доступными непросто — написанная с использованием WebGL игра рендерится в элементе <canvas>, который в настоящее время не предоставляет никаких возможностей для использования людьми с дефектами зрения. Можно успокаивать себя тем, что данная группа пользователей не входит в целевую аудиторию, поэтому не стоит ожидать полной доступности для них. Тем не менее, вы можете реализовать управление с помощью клавиатуры (en-US) для игроков, которые не могут использовать мышь, а также сделать цветовую схему достаточно контрастной для игроков с дальтонизмом.

Проблема с чрезмерным использованием JavaScript

Данная проблема возникает, когда разработчики слишком сильно полагаются на JavaScript. Порой вы можете встретить сайт, на котором всё генерируется с помощью JavaScript — HTML, CSS и так далее. Такое решение точно так же требует поддержания всех видов доступности и решения связанных с ними проблем.

Для каждой задачи хорош свой инструмент — это правило справедливо как для выбора HTML-элементов, так и для используемой технологии в целом. Стоит хорошенько обдумать, нужно ли использовать тот сияющий, написанный на JavaScript информационный 3D-блок или же воспользоваться старым добрым и обыкновенным текстовым блоком? Нужен ли тот сложный нестандартный виджет в форме, или будет достаточно простого поля для ввода текста? Не следует генерировать весь HTML при помощи JavaScript, если это возможно.

Ненавязчивый JavaScript

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

Хорошие примеры использования подхода с ненавязчивым JavaScript:

• Валидация формы на клиенте, которая показывает пользователю сообщение о проблемах в заполнении формы без необходимости отправлять данные для проверки на сервер. Если скриптов не будет, то форма продолжит работать, просто валидация будет несколько медленнее.
• Создание нестандартных элементов управления для HTML5 <video>, которыми возможно пользоваться с клавиатуры. И в то же самое время, указание прямой ссылки на видео, которой можно воспользоваться, если JavaScript отключён (стандартные элементы управления <video> недоступны с клавиатуры в большинстве браузеров).

Для примера, мы подготовили простенькую черновую версию клиентской валидации формы — form-validation.html (здесь можно посмотреть вживую). Если попытаться нажать на кнопку отправки, не заполнив одно из полей, то форма на сервер отправлена не будет, зато появится сообщение с информацией об ошибках.

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

Примечание: В этом простом примере серверная валидация не реализована.

Также мы постарались сделать эту форму довольно доступной. Мы использовали элементы <label> и связали их со своими полями ввода, таким образом скринридеры смогут корректно их озвучить:

<label for="name">Введите ваше имя:</label>
<input type="text" name="name">

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

form.onsubmit = validate;

function validate(e) {
  errorList.innerHTML = '';
  for (let i = 0; i < formItems.length; i++) {
    const testItem = formItems[i];
    if (testItem.input.value === '') {
      errorField.style.left = '360px';
      createLink(testItem);
    }
  }

  if (errorList.innerHTML !== '') {
    e.preventDefault();
  }
}

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

В реальности валидация формы будет в разы сложнее. Возможно, вы захотите проверить, что введённое имя действительно выглядит как имя, а возраст — как число, да ещё и реалистичное (например, не отрицательное и состоящее не более чем из 3 цифр). Здесь мы реализовали лишь примитивную проверку на наличие хоть какого-то текста в полях ввода (if (testItem.input.value === '')).

Когда валидация проходит успешно, форма отправляется на сервер. Если же были обнаружены ошибки (if (errorList.innerHTML !== '')), то мы прерываем отправку формы (при помощи preventDefault()) и отображаем сообщения обо всех найденных ошибках (смотрите далее).

Для каждого пустого на момент отправки формы поля ввода мы создаем элемент списка с ссылкой и добавляем в errorList.

function createLink(testItem) {
  const listItem = document.createElement('li');
  const anchor = document.createElement('a');

  anchor.textContent = 'Поле ввода ' + testItem.input.name + ' пусто: введите ' + testItem.input.name + '.';
  anchor.href = '#' + testItem.input.name;
  anchor.onclick = function() {
    testItem.input.focus();
  };
  listItem.appendChild(anchor);
  errorList.appendChild(listItem);
}

Каждая ссылка выполняет две задачи — она рассказыает, какая ошибка случилась, а также при клике на неё можно перейти прямо в связанное поле ввода и скорректировать введённое значение.

Примечание: Часть этого примера, связанная с focus(), довольно хитрая. Браузеры Chrome и Edge (а также новые версии IE) не нуждаются в коде onclick/focus() — они сами переведут фокус на элемент после клика по ссылке. Safari лишь выделит нужный элемент, так что этот блок кода нужен для корректной установки фокуса. В Firefox же трюк с выделением элемента при клике по ссылке не работает вообще. Данная ошибка должна быть вскоре исправлена — тогда Firefox придет к паритету с прочими браузерами (смотрите баг 277178).

Дополнительно, то что errorField расположено в вёрстке в самом начале (тогда как визуально в интерфейсе расположено иначе при помощи CSS), позволяет пользователям увидеть, что именно не так с заполнением формы, и легко вернуться обратно к нужным полям ввода в начале страницы.

Кроме того, мы использовали несколько WAI-ARIA атрибутов в нашем примере, чтобы решить проблемы с доступностью, вызванные обновлением контента без перезагрузки страницы (по умолчанию, скринридеры не могут подхватить эти изменения и уведомить об этом пользователя):

<div role="alert" aria-relevant="all">
  <ul>
  </ul>
</div>

Мы разберем данные атрибуты в следующей статье, которая подробно описывает WAI-ARIA.

Примечание: Кто-то из читателей мог задуматься о том факте, что в HTML5 формах есть встроенные механизмы валидации, такие как атрибуты required, min/minlength и max/maxlength (смотрите подробнее на странице элемента <input>). Мы не использовали их в примере, потому что поддержка браузерами у HTML5 валидации весьма варьируется (например, только IE10 и новее).

Прочие проблемы доступности, связанные с JavaScript

Здесь мы собрали прочие аспекты, о которых стоит задумываться при написании JavaScript, если вы беспокоитесь о доступности. Мы будем обновлять данный раздел.

Специфичные события мыши

Большая часть интерактивности в пользовательских интерфейсах реализуется в JavaScript при помощи обработчиков событий, которые позволяют запускать код, когда происходит определённое событие. У некоторых таких событий имеются проблемы с доступностью. Хороший пример — это специфичные события мыши, например mouseover (en-US), mouseout (en-US), dblclick (en-US) и так далее. Функции, которые активируются при срабатывании этих событий, не будут доступны при использовании других устройств ввода, например клавиатуры.

Чтобы избежать проблем подобного рода, следует дублировать функциональность при помощи независимых от устройств событий. Например, события focus (en-US) и blur будут работать как для мыши, так и для клавиатуры.

Рассмотрим пример, который проиллюстрирует, когда это может быть важно. Допустим, у нас есть миниатюрное изображение, при наведении на которое или при фокусе на котором должна показываться его увеличенная версия (примерно как карточки товаров в каталоге интернет-магазина).

Мы подготовили простой пример, который можно посмотреть здесь mouse-and-keyboard-events.html (а здесь можно посмотреть исходный код). В коде представлены две функции, которые показывают и скрывают увеличенное изображение. Они устанавливаются в качестве обработчиков событий следующими строками кода:

imgThumb.onmouseover = showImg;
imgThumb.onmouseout = hideImg;

imgThumb.onfocus = showImg;
imgThumb.onblur = hideImg;

Первые две строки кода запускают функцию, когда указатель мыши наводится на изображение или уходит с него, соответственно. Такая реализация не позволит открыть увеличенное изображение при помощи клавиатуры. Чтобы решить эту проблему, мы добавили последние две строки, которые запускают функции в случаях, если фокус перешёл на изображение или же ушёл с него. Таким образом, увеличенное изображение будет открываться при переходе на миниатюру при помощи клавиши tab (это возможно, потому что мы добавили миниатюрам tabindex="0").

Событие click (en-US) довольно любопытное — выглядит так, будто бы оно специфичное для мыши, однако большинство браузеров при нажатии клавиши Enter/Return активируют обработчики событий onclick на находящихся в фокусе ссылках или элементах формы, а также при тапе по элементам на сенсорном экране. Впрочем, это не работает автоматически, если вы позволяете принимать фокус неинтерактивному по умолчанию элементу при помощи tabindex — в таких случаях нужно специально прослушивать нажатие нужных кнопок (смотрите Добавление доступности с клавиатуры).

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

Далее WAI-ARIA!

HTML, CSS, JavaScript и PHP: что это такое и для чего?

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

HTML

HTML (Hypertext Markup Language) — это язык гипертекстовой разметки. Эта разметка создается с помощью тегов (то есть с помощью «меток») — наборов символов, входящие в угловатые скобки. Например, основной тег страницы html пишется следующим образом — <html>. Любая страница в интернете состоит из множества тегов. Конечно, это не то, что мы привыкли видеть, когда заходим в интернет. Каждый из этих тегов играет определенную важную роль.

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

Рассмотрим общую структуру любой страницы в интернете:

Любая веб страница начинается с <!DOCTYPE html>. Этот тег дает браузеру понять, что далее представлен код html последней [пятой] версии.

Затем пишется парный тег <html></html>. Это основной тег страницы, который обязательно должен присутствовать и содержать в себе других 2 основных тега, это head и body.

Внутри парного тега <head></head> необходимо написать заголовок страницы (тег title), который отображается во вкладке браузера. Так же в контейнере <head></head> обычно находятся различные мета-теги для поисковых систем, подключение различных файлов к странице (например, стили) и т.д. В этой секции находится информация, которая важна для страницы, но не отображается на ней.

Внутри тега <body></body> находится всё, что должно быть на странице. Это любые из существующих тегов, текст, картинки, элементы работы с данными и так далее. Всё, что вы видите на страницах в интернете, всегда находится в теге body.

В приведенном выше примере в теге body находятся 2 элемента — тег h2 и тег p. Тег h2 обозначает заголовок на странице, а тег p — абзац. У каждого html тега есть свое предназначение. К тому же все элементы имеют стандартное форматирование браузера, это значит, что размер текста в заголовке по умолчанию будет больше, чем в абзаце. Из таких тегов и составляется страница, которую вы видите в браузере. Однако без графического оформления эти элементы совсем не презентабельные, именно поэтому нужен CSS.

CSS

CSS — Cascading Style Sheets — это каскадные таблицы стилей. С помощью разметки мы создали структуру и наполнение документа, а теперь будем внешне оформлять. Вот для этого и служат каскадные таблицы стилей. Чтобы здесь тоже упросить задачу с понятием CSS, вернемся к нашему примеру с домом. После постройки дома он выглядит совсем не презентабельно, поэтому, чтобы придать красивый вид, его раскрашивают. Подъезд покрашен в один цвет, балконы в другой и так далее. Это и есть графическое оформление. Так же и со страницей: без стилей элементы имеют только стандартное оформление браузера. Но с помощью стилей вы меняете на странице размер текста, его цвет, шрифт и так далее.

Вернемся к нашему примеру кода страницы html. Для тега h2 можно задать красный цвет текста следующим образом:

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

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

JavaScript

JavaScript — это язык программирования, сокращенно «JS». Изначально его создали для того, чтобы «оживить» веб-приложения и веб-сайты, то есть, чтобы элементы интерфейса (всплывающие окна, анимации, кнопки и т.д.) реагировали на действия пользователей. Однако сейчас этот язык программирования применяют не только для оживления страниц, но и на стороне сервера, для создания мобильных приложений, веб-сервисов и так далее.

Если вернуться к примеру с домом — то JavaScript это лифт, который доставляет пользователей на нужный этаж. Пользователь заходит в дом, ему нужно попасть на конкретный этаж, он нажимает на кнопку этажа и далее лифт автоматически доставляет пользователя на нужный этаж. Так же и на странице, пользователь нажимает на кнопку, а JavaScript выполняет нужное действие. Конечно, человек всегда может подняться по лестнице, так же как и сайт может работать без JavaScript, но, согласитесь, именно лифт делает дом лучше, так же как и JavaScript делает лучше веб-страницу.

PHP

Ну и последняя технология в этой связке — PHP. PHP (от англ. Hypertext Preprocessor) — это серверный язык программирования. Как мы уже отметили, если JavaScript работает на стороне клиента (браузера пользователя), то PHP — на стороне сервера (компьютер, где располагается сайт). PHP не зависит от скорости компьютера пользователя или его браузера, он полностью работает на сервере. PHP позволяет соединить все страницы в единое целое и предоставить сайту функции, без которых эти страницы не будут работать как единое целое: авторизоваться на сайте, подать заявку на бронирование, добавить товары в корзину и сделать заказ. PHP работает с базой данных, которая хранит всю динамическую (изменяющуюся) информацию на сайте.

Если вернуться к нашему примеру с домом, то PHP можно представить как водопроводную систему, электричество и т.д. То есть это то, что работает «под капотом» дома. Чтобы лифт работал, в доме нужно электричество. И это более важная составляющая дома, нежели лифт. Когда жилец дома тратит электричество, то все эти показания записываются в «базу данных» дома. Так же и с сайтом, когда пользователь нажимает на кнопку отправки заявки на бронирование, JavaScript отправляет данные на сервер, где PHP обрабатывает эту информацию и записывает в базу данных.

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

Если вы еще только планируете изучение этих технологий, то рекомендуем рассмотреть обучение на нашем курсе «Веб-верстальщик», в котором подробно изучаются такие технологии, как HTML, CSS и JavaScript. Этих трех технологий вполне достаточно, чтобы создавать сайты. А при необходимости можно заняться освоением языка PHP, чтобы делать более мощные и большие сайты.

HTML, CSS, JavaScript: где и как учиться веб-разработке

Что почитать

HTML и CSS разработка и создание веб-сайтов. Джон Дакетт

JavaScript и jQuery интерактивная веб-разработка. Джон Дакетт

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

freeCodeCamp

Здесь описаны, как базовые концепции так и фреймворки JS. Сайт бесплатный, но только на английском, так что знание языка обязательно. 

JavaScript.ru

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

htmlbook.ru

Если у вы не знаете или не помните определённые теги, которые вам нужно использовать при верстке, вы всегда можете использовать данный сайт. Здесь есть все теги и их подробное описание, так что вы точно не запутаетесь. 

Где поучиться

Курсов, где вас могут научить верстке также немало, но я решил подобрать во-первых бесплатные, во-вторых максимально хорошие курсы. Единственное, если вам понадобится сертификат о прохождении курса, то придётся заплатить. 

Coursera

HTML, CSS, and JavaScript for Web Developers

Курс для начинающих, которые знают английский язык и хотят изучить комплексно HTML, JavaScript и CSS. Преподаватели — специалисты из университета Johns Hopkins University в США.

Web Design for Everybody: Basic of Web Development & Coding

Базовый курс от University of Michigan. Подойдёт даже тем, кто раньше никогда не имел дела с разработкой. На английском языке. 

Stepik

Веб-разработка для начинающих: HTML и CSS

Курс на русском языке от РЭУ им. Плеханова. Он также создан для людей, которые никогда раньше не программировали. 

JavaScript for Beginners

Вводный курс на английском языке. Для новичков!

Introduction to JavaScript and React

Тут научат JavaScript и расскажут о библиотеке React. 

Фото на обложке: Unsplash

HTML, CSS, JavaScript, Smarty — Документация docs.cs-cart.ru 4.4.x

<html>
    <head>
    </head>
    <body>
        <div>Header</div>
        <div>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>

            <h7>Some table data</h7>

            <div>
                <table cellpadding="0" border="0">
                <tr>
                    <td>
                        ....
                    </td>
                </tr>
                </table>
            </div>
        </div>
    </body>
</html>

<input type="hidden"   name="product_data[is_selected]" value="N" />
<input type="checkbox" name="product_data[is_selected]" value="Y" />

Работа с HTML и CSS с помощью Javascript. Вводное видео.

Это небольшое обзорное видео курса «Javascript. Работа с HTML и CSS.».

Язык Javascript имеет мощные средства для того, чтобы работать с такими технологиями как HTML и CSS. Это становиться возможным благодаря тому, что Javascript взаимодействует с так называем DOM (Document Object Model) деревом веб-страницы. 

Подробнее об этом взаимодействии Javascript и DOM, мы и будем говорить в этом курсе.

Для начала, давайте попробуем ответить на вопрос, а для чего это нам нужно. 

Ответ здесь довольно простой. Главная задача для чего это делается — это автоматизация. 

+ С помощью Javascript мы можем менять содержимое и внешний вид элементов в зависимости от каких-то условий, которые образовались на странице.

Пользователь кликнул по какому-то элементу на веб-странице и этот элемент поменял свое оформление.

Пользователь навел курсор мыши в определенный участок экрана и этот участок поменял свое оформление.

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

+ С помощью Javascript можно выполнять какие-то действия, определенное количество раз и в определенной последовательности с элементами HTML и CSS. 

+ Мы можем производить какие-то расчеты и.т.д.

Самая главная цель, зачем работать с HTML и CSS с помощью Javascript — это автоматизация.

В видео выше вы можете посмотреть несколько примеров того, как Javascript может взаимодействовать с HTML и CSS. К примеру, это может быть 3D-карусель картинок, калькулятор для сайта, который рассчитывает какие-то параметры, аккордеоны, меню, и.т.д.

Задача этого курса — научиться базовым приемам взаимодействия с HTML и CSS с помощью Javascript. 

Мы будем учиться как выбирать элементы, как добавлять какие-то элементы на веб-страницу с помощью Javascript, как удалять и изменять эти элементы и.т.д.

Напишите в комментариях примеры ситуаций, когда вам может понадобиться работа с DOM в Javascript.

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

CSS и JS в состоянии войны: как это остановить | by Workafrolic (±∞) | Web Standards

Перевод «CSS and JS Are at War, Here’s How to Stop It» Андрея Ситника.

ESPN — Saber Combat

Резюмируя: множество людей любят и JS и UX, CSS и т.д. Если мы перестанем раздавать ярлыки типа «JS-разработчик» или «UX-разработчик», то сможем добиться перемирия в текущей войне «JS против CSS».

Некоторые называют её «Великим расколом»: линия фронта реальна; с приверженцами JavaScript с одной стороны и людьми из лагеря UX и CSS, которые пропагандируют подход «без-JS» к интерфейсам, с другой стороны.

Фронтенд-разработчики боятся, что потеряют работу, если не будут следовать за хайпом вокруг JS. И это вполне логично: проводится значительно меньше конференций и митапов по CSS по сравнению с JS, React и иже с ними. Например, в Нью-Йорке существует больше шести JS-митапов и ноль регулярных CSS-митапов.

С другой стороны мы видим, что простые статические сайты слишком перегружены только из-за синдрома упущенной выгоды.

Мы каждый день наблюдаем, как видные деятели фронтенд сообщества обвиняют друг друга. И это, мягко говоря, расстраивает.

Воюющих часто разделяют на коалиции:

1. JS-JS-JS: разработчики, создающие SPA с клиентской частью на каком-нибудь JavaScript-фреймворке, типа React, Vue.js и Angular. Они являются активными пользователями всяческих инструментов для сборки (Babel, Webpack и т.д.) и JS-библиотек.
2. UX-разработчики, CSS-разработчики, HTML-JS-CSS-разработчики: разработчики, создающие статичные сайты на ванильном JavaScript и чистом CSS. Доступность и быстродействие — главные темы обсуждений внутри комьюнити.

Но существует ли этот раскол? Может этот дуализм основан только лишь на наших предрассудках?

На мой взгляд, эта предвзятость во многом обусловлена двумя вещами.

Во-первых, существует тренд разделять конференции по CSS и JS. Думаю, что это началось с очень популярного семейства ивентов JSConf и CSSConf и тенденции организации митапов Впиши-Свой-Город-Сюда.js. Западные платформы публикации контента поддерживают этот разлад: некоторые публикуют в основном статьи о React и JS в то время, как другие сфокусированы на CSS и UX.

Во-вторых, соцсети хороши в поляризации сообщества. Мы помещаем себя в пузырь единомышленников путём подписки на их фиды и ухудшаем ситуацию, делая перепосты только самых агрессивных мнений, приходящих с той стороны.

Современный веб невероятно сложен. Крайне сложно освоить все необходимые для работы веба технологии и никто по-настоящему не может назвать себя на 100% фулстэк-разработчиком. Но из-за искусственно увеличенного разрыва между ветками обсуждения JS и CSS с UX люди с разными, но не обязательно противоположными увлечениями, сталкиваются с чёрно-белым взглядом на мир «JS против CSS». Разработчики на React, которые увлекаются CSS-анимацией и a11y, получают ярлык «фанат JS». И CSS-разработчик, который любит Babel и CSS-in-JS с без рантайма, всё ещё будет носить звание CSS-парня или девчонки.

Как создатель PostCSS, я никогда не мог выбрать сторону даже если очень хотел этого. С одной стороны PostCSS это инструмент для CSS (что отражено в названии). С другой стороны PostCSS это инструмент сборки, написанный на JavaScript, а сборщики не особо в чести в современном сообществе CSS.

И я не одинок, есть ещё куча таких же людей: к примеру, создатель великолепных инструментов для анимации в React или создатель CSS-линтера доступности.

По правде говоря, каждый из нас знает лишь небольшое подмножество технологий. И чьи-то увлечения не обязаны лежать в одной области. Это нормально — любить и React и CSS одновременно. Или использовать сложную систему сборки чтобы быть уверенным, что твой продукт является доступным. Или может погрузиться в распределённые системы, чтобы сделать действительно классный UX в условиях отсутствия интернета.

Даже сами технологии не могут быть чёрно-белыми.

Сторонники «лагеря CSS» часто упоминают БЭМ как решение тех проблем, для которых создавался CSS-in-JS. Но не многие знают, что он, БЭМ, был спроектирован в Яндексе не как чисто CSS-технология. В него также входят JavaScript-фреймворк и изначально строился на ряде принципов, которые были позже использованы в React (например, вложенность маленьких изолированных компонентов).

Конфиги для ESLint, популярные в React-сообществе (по типу конфига AirBnB), содержат множество правил обеспечения доступности.

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

1. Если ты любишь технологии с обеих «сторон»: рассказывай об этом! Вытащи это на свет, дай людям возможность начать цивилизованное обсуждение. Тебе нравятся современные JS-фреймворки, но также тебе нравится создавать статические сайты, которые рендерятся на сервере? Скажи об этом миру. Независимые разработчики будут создавать больше фреймворков для статических сайтов, если будут видеть необходимость в них.
2. Давайте устроим публичный форум для обсуждений между мирами JS и CSS. Если вы организуете JavaScript-митап, то пусть в программе будет один доклад о CSS или UX. Пусть будут фронтенд-конференции вместо JS-конференций и CSS-конференций, где люди из разных лагерей смогут рассказать своим оппонентам о своих ежедневных проблемах и предпочитаемых решениях.
3. Давайте пробовать технологии, пришедшие с другой стороны:

• Если вы CSS- или UX-разработчик, то начните с линтеров. Stylelint отличный CSS-линтер для начала знакомства.Он будет предупреждать вам об ошибках и позволит делиться лучшими практиками внутри команды. И вы можете запустить его как плагин в вашем любимом текстовом редакторе, поэтому вам даже не нужен какой-либо сборщик.
• Если вы React-разработчик — попробуйте ванильный JS на следующем лендинге или блоге. Это поможет лучше понять внутренности вашего фреймворка. А ваши юзеры скажут вам спасибо за более быструю загрузку за счёт более лёгкого бандла.

Моя статья о будущем PostCSS, линтеров и CSS-in-JS из Марсианских хроник.

CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript

Чтобы создать прокручиваемый контейнер, нужно настроить отображение содержимого — его не должно быть видно за пределами блока. Эта задача решается с помощью CSS-свойства overflow. Можно использовать значение auto или scroll. Пример кода:

See the Pen
Basic Slider by Pochemuta (@pochemuta)
on CodePen.

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

Решить эту проблему поможет CSS Scroll Snap. Он позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу. Вот классный пример использования из статьи Practical CSS Scroll Snapping:

Простой прокручиваемый контейнер

Чтобы добиться похожего эффекта, добавим в наш код два свойства: scroll-snap-type и scroll-snap-align. Первое нужно указать для контейнера, второе — для дочерних элементов.

See the Pen
Scroll Snap by Pochemuta (@pochemuta)
on CodePen.

Отлично — теперь элементы можно пролистывать свайпом, а не перетаскивать пальцем через всю ширину экрана. Посмотрим, какие ещё возможности даёт CSS Scroll Snap.

1

Настройка направления и строгости привязки

Свойство scroll-snap-type задаётся контейнеру и позволяет указать направление, в котором происходит привязка прокрутки (x или y), а также строгость привязки (none, mandatory или proximity).

С направлением всё просто:

• горизонтальная прокрутка — x или ключевое слово inline:
• вертикальная прокрутка — y или ключевое слово block;
• привязка в обоих направлениях — both.

Чуть сложнее увидеть разницу между значениями mandatory и proximity, которые определяют строгость привязки:

• none — нет привязки к точке;
• mandatory — обязательное смещение прокрутки к указанной точке;
• proximity — смещение происходит только в тех ситуациях, когда область видимости находится близко к точке привязки. Степень близости браузер определяет самостоятельно.

Главный плюс mandatory — предсказуемость. Вы знаете, что браузер точно сместит область видимости к заданной точке. Главный минус — негибкость. Например, если содержимое при вертикальной прокрутке слишком большое по высоте, то пользователи окажутся в неприятной ситуации — они просто не смогут переместиться к определённому месту, браузер будет сразу перекидывать их к точке привязки.

See the Pen
Scroll Snap mandatory by Pochemuta (@pochemuta)
on CodePen.

Текст не помещается в области видимости по высоте, последние строчки невозможно прочитать, потому что срабатывает строгая привязка к прокрутке. Чтобы такого эффекта не было, можно заменить mandatory на proximity. Но и здесь остаётся опасность пролистывания — всё зависит от браузера. Проблему можно решить с помощью свойства scroll-padding, о котором мы поговорим ниже.

2

Изменение точек привязки

Свойство scroll-snap-align задаётся дочерним элементам. Это те самые точки привязки, про которые шла речь при изучении значений mandatory и proximity свойства scroll-snap-type. Доступные значения scroll-snap-align — start, center и end.

Чтобы было проще понять разницу, посмотрите на этот пример:

See the Pen
Scroll Snap start, center, end by Pochemuta (@pochemuta)
on CodePen.

У первого и второго элементов значение start, у третьего — center, — у четвёртого и пятого — end. Прокрутите содержимое контейнера вверх и вниз. Проследите, как меняется позиция каждого элемента.

При горизонтальной прокрутке привязка работает аналогичным образом. Start в таком случае — левый край контейнера, end — правый край.

3

Управление прокруткой

Свойство scroll-snap-stop задаётся дочерним элементам и позволяет управлять прокруткой. Принимает два значения:

• normal — привязка происходит только тогда, когда пользователь прекращает прокрутку, отдельные точки привязки могут быть пропущены;
• always — контейнер останавливается на каждой точке привязке, прежде чем пользователь сможет скроллить дальше.

Значение по умолчанию — normal. Но если вы хотите исключить вероятность того, что пользователь пролистнёт важный элемент, установите значение always.

4

Настройка внутреннего отступа контейнера

Свойство scroll-padding задаётся контейнеру и устанавливает внутренний отступ. Вместо сокращённой записи можно использовать более конкретную: scroll-padding-top/right/bottom/left.

Внутренний отступ может быть полезен, если высота элемента больше высоты контейнера. Это решает рассмотренную выше проблему использования значения mandatory свойства scroll-snap-type. Можно просто указать, чтобы при пролистывании сверху оставалось достаточно место для отображения последних строк фрагмента текста.

See the Pen
Scroll Snap padding by Pochemuta (@pochemuta)
on CodePen.

Ещё одно полезное применение — если внутри контейнера есть фиксированный блок. Отступ поможет избавиться от перекрывания содержимого.

5

Настройка внешнего отступа элемента

Свойство scroll-margin задаётся дочерним элементам и устанавливает внешний отступ до позиции прокрутки. Вместо сокращённой записи можно использовать более конкретную: scroll-margin-top/right/bottom/left.

See the Pen
Scroll Snap margin by Pochemuta (@pochemuta)
on CodePen.

Например, здесь внешний отступ задан только третьему элементу. Он занимает позицию в 50px от позиции прокрутки. При этом следующие за ним элементы снова привязываются к указанной точке.

Поддержка в браузерах:

В последних версиях популярных браузеров полная поддержка. В Internet Explorer 10 и 11 — частичная.

Актуальность проверяйте на сайте Can I Use.

Узнать больше:

Ещё интересные материалы про CSS и фронтенд:

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

html — Как вы читаете значения правил CSS с помощью JavaScript?

На основе ответа @dude это должно возвращать соответствующие стили в объекте, например:

  .recurly-input {
  дисплей: блок;
  радиус границы: 2 пикселя;
  -webkit-border-radius: 2 пикселя;
  наброски: 0;
  тень коробки: нет;
  граница: 1px solid # beb7b3;
  отступ: 0.6em;
  цвет фона: # f7f7f7;
  ширина: 100%;
}
  

Это вернет:

  фон Цвет:
"RGB (247, 247, 247)"
граница
:
"1px сплошной RGB (190, 183, 179)"
borderBottom
:
"1px сплошной RGB (190, 183, 179)"
borderBottomColor
:
"RGB (190, 183, 179)"
borderBottomLeftRadius
:
"2px"
borderBottomRightRadius
:
"2px"
borderBottomStyle
:
"твердый"
borderBottomWidth
:
"1px"
цвет границы
:
"RGB (190, 183, 179)"
borderLeft
:
"1px сплошной RGB (190, 183, 179)"
borderLeftColor
:
"RGB (190, 183, 179)"
borderLeftStyle
:
"твердый"
borderLeftWidth
:
«1px»
borderRadius
:
"2px"
граница
:
"1px сплошной RGB (190, 183, 179)"
borderRightColor
:
"RGB (190, 183, 179)"
borderRightStyle
:
"твердый"
borderRightWidth
:
"1px"
borderStyle
:
"твердый"
граница
:
"1px сплошной RGB (190, 183, 179)"
borderTopColor
:
"RGB (190, 183, 179)"
borderTopLeftRadius
:
"2px"
borderTopRightRadius
:
"2px"
borderTopStyle
:
"твердый"
borderTopWidth
:
"1px"
ширина рамки
:
"1px"
boxShadow
:
"никто"
отображать
:
"блокировать"
контур
:
"0px"
outlineWidth
:
"0px"
набивка
:
«0.6em "
paddingBottom
:
«0.6em»
paddingLeft
:
«0.6em»
paddingRight
:
"0.6em"
paddingTop
:
«0.6em»
ширина
:
«100%»
  

Код:

  function getStyle (className_) {

    var styleSheets = window.document.styleSheets;
    var styleSheetsLength = styleSheets.length;
    for (var i = 0; i  isNaN (parseInt (k)) && typeof (v) == 'string' && v && v! = 'initial' && k! = ' cssText ')
            }
        }
    }

}
  

Разница между CSS и JavaScript

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

CSS: CSS означает Cascading Style Sheet , это язык таблиц стилей, используемый для формирования элементов HTML, которые будут отображаться в браузерах как веб-страницы. Без использования CSS веб-сайт, созданный с использованием HTML, будет выглядеть скучно. В основном CSS обеспечивает внешнюю оболочку любых элементов HTML. Если вы рассматриваете HTML как скелет веб-страницы, тогда CSS будет оболочкой скелета.Тип Интернет-носителя (тип MIME) CSS — это текст / CSS.

CSS Особенности:

• CSS совместим со всеми устройствами.
• С помощью CSS обслуживание веб-сайтов становится простым и быстрым.
• CSS поддерживает последовательные и спонтанные изменения.
• CSS ускоряет работу веб-сайта и расширяет возможности поисковых систем для сканирования веб-страниц.
• Он имеет особую особенность — возможность изменения положения.

JavaScript: Это легкий, кроссплатформенный и интерпретируемый язык сценариев.Он хорошо известен разработкой веб-страниц, многие небраузерные среды также используют его. JavaScript может использоваться как для разработки на стороне клиента, так и на стороне сервера. JavaScript содержит стандартную библиотеку объектов, таких как Array, Date и Math, и основной набор языковых элементов, таких как операторы, управляющие структуры и инструкции. JavaScript может использоваться как на стороне клиента , а также как на стороне сервера .

Функции JavaScript:

• JavaScript был создан в первую очередь для манипуляций с DOM.Раньше веб-сайты были в основном статичными, после того как JavaScript был создан динамическими веб-сайтами.
• Функции в JS — это объекты. У них могут быть свойства и методы, как и у других объектов. Их можно передавать в качестве аргументов в другие функции.
• Он может обрабатывать дату и время.
• Выполняет проверку формы, хотя формы создаются с использованием HTML.
• Компилятор не требуется.

Разница между CSS и JavaScript: