yoksel

javascript:void(function(){

    var doc = document;
    var body = doc.querySelector("body");
    var head = doc.querySelector("head");
    var icons = "";

    var resultElem = doc.querySelector("#icons-shower");

    if ( !resultElem ) {

yoksel

Бухвалова Юлия. Комментарии к проекту.

Ссылка на проект: https://yoksel.github.io/A11y-course/

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

Мобильной версии и версии без JS нет, не успела сделать.

Изменения в дизайне при вёрстке

yoksel

// ==UserScript==
// @name           CommentsEditor
// @namespace      http:// yoksel.ru/
// @description    Html-editor for comments on Livejournal.com
// @include        *livejournal.com*
// @require        https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// @grant          GM_addStyle
// ==/UserScript==

GM_addStyle("#mybuttons {\

yoksel

.video {
  /* Get aspect ratio */
  --aspect-ratio: calc(var(--height) / var(--width));
  /* Add units to height */
  --height-with-units: calc(var(--height) * 1px);

  max-width: 100%;

  /* Get minimal of initial height
     or height calculated from window width */

yoksel

<iframe
    width="560" height="315"
    style="--width: 560; --height: 315;"
    class="video"
    ...
></iframe>

yoksel

Команды VoiceOver вводятся нажатием клавиш Control и Option (клавиши VO)

Open the Web Item rotor: VO-U

VoiceOver: Web Commands (найти на странице Web Commands)

• VO + A — читать всё от выделенного и дальше
• VO + Shift-Down Arrow — начать взаимодействовать с элементом
• VO + Shift-Up Arrow — закончить взаимодействовать с элементом

yoksel

Set custom property type

https://developer.mozilla.org/ru/docs/Web/API/CSS/registerProperty

https://www.w3.org/TR/css-properties-values-api-1/#example-2

Via JS

CSS.registerProperty({

yoksel

{
  "rules": {
    "at-rule-empty-line-before": [
      "always",
      {
        except: ["blockless-group", "first-nested"],
        message: "Ожидается пустая строка перед @-правилом"
      }
    ],
    "at-rule-semicolon-newline-after": [

yoksel

Форматирование

• Используем отступ в 2 пробела
• В названиях классов не используем camelCase
• Не используем в селекторах атрибуты ID, кроме крайней необходимости
• При использовании нескольких селекторов каждый переносится на следующую строку
• Перед открывающей скобкой { ставим пробел
• В правилах ставим пробел после двоеточия :, до двоеточия пробелов нет
• Закрывающую скобку } ставим на новой строке, отбиваем пробелами на один уровень с правилами

yoksel

Проекты на JavaScript

https://github.com/yoksel/shop-admin-page — админка магазина, учебный проект https://github.com/yoksel/emoji-brush — рисовалка эмоджами. Использует веб-комоненты, SVG и textPath

Проект на реакте

https://github.com/yoksel/svg-filters — конструктор SVG-фильтров

Проекты на ноде