Нажатие css: 🤷🏽‍♀️ Page not found | MDN Web Docs

Оформляйте стили наведения, фокуса и активного состояния по-разному / Хабр

В течение многих лет я оформлял состояния элементов

:hover

,

:focus

и

:active

одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.

Вот пример кода, который всегда использовал.

.selector {
  &:hover, 
  &:focus,
  &:active {
    ...
  }
}

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

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

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

Давайте начнём с :hover.

Стилизация наведения (:hover)

:hover

срабатывает, когда пользователь наводит на элемент курсор мыши.

Обычно это состояние заключается в изменении цвета фона background-color и/или текста color. Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.

button {
  background-color: #dedede;
}
 
button:hover {
  background-color: #aaa;
}

Стилизация фокуса (:focus)

:focus

срабатывает, когда элемент получает фокус. Это достигается двумя способами:

1. при выборе элемента кнопкой «Tab»
2. при щелчке на элемент мышью

К фокусным элементам относятся:

1. Ссылки (<a>)
2. Кнопки (<button>)
3. Элементы формы (<input>, <textarea> и т.д)
4. Элементы с атрибутом tabindex

Следует помнить о некоторых важных моментах:

1. Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом tabindex="-1", но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.
2. В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов <button>
3. При клике на ссылку <a>, фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте href указан существующий на этой же странице id

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

Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.

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

1. Добавление обводки (outline)
2. Создание анимаций
3. Изменение background-color
4. Изменение color

Поскольку изменение свойств

background-color

и

color

часто производится при

:hover

, имеет смысл состояние

:focus

оформлять с помощью обводки или анимации.

Вы можете использовать комбинации свойств outline, border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».

button {
  background-color: #dedede;
}
 
button:hover {
  background-color: #aaa;
}
 
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}

Стилизация активного состояния (:active)

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

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

1. Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
2. Удержание кнопки пробела (на кнопках)

button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

Две особенности, которые следует принять к сведению:

1. Удержание пробела вызывает состояние :active у кнопок (<button>), но при удержании Enter этого не происходит
2. Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

Стили ссылок по умолчанию

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

Взаимосвязь между :active и :focus

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

Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

Для ссылок:

1. При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus. В Safari – только состояние :active (проверено только на Mac OS)
2. Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на <body>

Для кнопок:

1. Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.

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

document.addEventListener('click', event => {
  if (event.target.matches('button')) {
    event.target.focus()
  }
})

Добавление этого кода изменит поведение нажатия кнопок на следующее:

1. При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome
2. Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах

Поведение кнопок в Safari после добавления фрагмента JS-кода

Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх

Волшебная комбинация

Волшебная комбинация

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

с элементом. Вот код, который вам нужен:

.element:hover,
.element:active {
  /* Изменить цвет фона/текста  */
}
 
.element:focus {
  /* Показать обводку */
}

Для пользователей мыши:

1. Когда пользователь наводит на элемент, меняется background-color (и/или color). Происходит отклик.
2. Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

Для пользователей клавиатуры:

1. Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
2. Когда они взаимодействуют с элементом, меняется background-color (и/или color). Происходит отклик.

Лучшее из обоих миров!

1. Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
2. Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.

Не волшебная (но может даже лучше) комбинация

Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.

Вот что произойдёт в Safari и Firefox на Mac OS:

1. Когда пользователь держит кнопку мыши нажатой, ничего не меняется
2. Когда пользователи отпускают кнопку, элемент получает фокус

Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.

Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover, :focus и :active по отдельности.

.element:hover {
  /* Изменить цвет фона/текста  */
}
 
.element:active {
  /* Иные изменения в цвете фона и текста */
}
 
.element:focus {
  /* Показать обводку */
}

Поведение кнопки в Safari, если были стилизованы все три состояния

Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

Отслеживание событий с помощью CSS селекторов в Google Tag Manager

Специалист отдела автоматизации и аналитики в MediaGuru Айнур Кильдияров объясняет, как настроить отслеживание нажатия на кнопку и отправки формы с помощью CSS селекторов в GTM.

Селекторы CSS — это шаблоны, которые вы можете проверить в любом элементе HTML. Традиционно CSS-селекторы использовались для изменения стилей данных элементов.

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

В статье мы рассмотрим, как настроить отслеживание двух типов событий:

1. Нажатие на кнопку или какой-либо другой элемент на вашем сайте

2. Успешную отправку формы.

Отслеживание нажатий на элемент с помощью селектора CSS

Вот как будет выглядеть весь процесс на примере отправки событий в UA:

1. Найдите CSS селектор элемента, который вы хотите отслеживать.

2. Создайте новый тег типа Universal Analytics, который отправляет данные о событиях в GA.

3. Проверьте тег через отладчик, затем опубликуйте контейнер.

Предположим, вы хотите отслеживать клики по кнопке «Контакты»‎:

Поиск CSS селектора с помощью консоли разработчика

1. Кликните правой кнопкой на элемент (Контакты) → Просмотреть код. Откроется консоль разработчика.

2. Кликните правой кнопкой на код элемента.

3. Скопируйте селектор.

Готово. Переходите к шестому шагу.

Расширение SelectorGadget в Google Chrome для поиска CSS-селектора элемента страницы

Подробнее остановимся на поиске селектора при помощи инструмента SelectorGadjet. Следуйте инструкциям ниже.

Шаг 1: Установите расширение SelectorGadget.

Шаг 2: Перейдите на страницу с элементом, клик на которой вы хотите отслеживать.

Шаг 3: Чтобы включить расширение, нажмите на значок SelectorGadjet (в правой верхней части окна браузера):

Шаг 4: Теперь нажмите на «Контакты» и скопируйте соответствующий селектор CSS, который отобразился в инструменте «SelectorGadget»:

В нашем случае отслеживаемый элемент имеет уникальный класс ff_meb, соответственно, селектор CSS будет: .ff_meb. Точка в этом случае обозначает, что это класс.

Шаг 5: Отключите расширение SelectorGadget, снова щелкнув на значок (в правой верхней части окна браузера).

Шаг 6: Перейдите к своей учетной записи GTM и создайте новый тег типа Universal Analytics. Назовите тег, например: «Клик по кнопке Контакты»‎.

Шаг 7: Задайте следующую конфигурацию:

Шаг 8: Создайте новый триггер со следующей конфигурацией:

В качестве оператора выбираем «Соответствует селектору CSS».

Шаг 9: Сохраните тег, а затем перейдите в режим предварительного просмотра.

Шаг 10: Обновите страницу сайта и кликните на «‎Контакты». Если ваш тег отображается в разделе Tags Fired On This Page, значит, что тег срабатывает при нажатии соответствующей кнопки.

Шаг 11: Вернитесь к своей учетной записи GTM и затем нажмите «Выйти из режима предварительного просмотра»‎.

Шаг 12: Опубликуйте контейнер.

Таким образом вы можете использовать CSS селекторы для отслеживания кликов на своем сайте с помощью GTM.

Отслеживание событий по отправке форм с помощью триггера «Доступность элемента»

Такой способ отлично подходит в случае, если невозможно использовать стандартный триггер для отслеживания форм «Отправка формы»‎. Триггер «Доступность элемента«‎ можно использовать как альтернативу способу с технологией AJAX, когда при отправке формы пользователя не перенаправляет на новую страницу.

Итак, начнем.

Шаг 1: Перейдите на страницу с формой, которую вы хотите отслеживать.

Шаг 2: Заполните каждое поле и нажмите «Отправить». Удостоверьтесь, что в ответ не пришло сообщение об ошибке.

Шаг 3: При успешной отправке обычно приходит сообщение благодарности. То, что нам нужно.

Шаг 4: Скопируйте CSS селектор этого элемента, открыв консоль разработчика.

В нашем случае отслеживаемый элемент имеет уникальный ID #nf-form-1-cont, соответственно, селектор CSS будет: #nf-form-1-cont > div > div.nf-response-msg > p. Решетка в данном случае обозначает, что это ID элемента.

Шаг 5: Перейдите к своей учетной записи GTM и создайте новый тег типа Universal Analytics. Назовите его «Успешная отправка заявки».

Шаг 6: Задайте следующую конфигурацию:

Шаг 7: Создайте новый триггер со следующей конфигурацией:

Шаг 8: Сохраните тег и перейдите в режим предварительного просмотра. Обновите страницу вашего сайта.

Шаг 9: Перейдите на страницу с формой, отправку которой нужно отследить.

Шаг 10: Заполните форму и нажмите кнопку «Отправить». Убедитесь, что в ответ не пришло сообщение об ошибке.

Шаг 11: Ниже в отладчике вы увидите теги, которые сработали на этой странице. Если тег отображается в разделе Tags fired on this page‎, значит, что он срабатывает при успешной отправке формы.

Шаг 12: Вернитесь к своей учетной записи GTM и затем нажмите «Выйти из режима предварительного просмотра»‎.

Шаг 13: Опубликуйте контейнер.

Вуаля! Готово.

_______________________

Материал подготовлен специально для ppc.world

Оцените статью

Загрузка…

Поделитесь в соцсетях

Обработка события click на CSS

Вы здесь:
Главная — CSS — CSS Основы — Обработка события click на CSS

Большинство из Вас, прочитав заголовок данной статьи, скажут, что обработка события click на CSS невозможна. Однако, это не совсем так. И в данной статье я покажу, как можно обработать событие click с использованием только CSS.

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

Для начала самый обычный HTML-код:

<div>

  <div>Содержимое 1</div>

  <div>Вкладка 1</div>

</div>

<div>

  <div>Содержимое 2</div>

  <div>Вкладка 2</div>

</div>

Ничего необычного, разве что название вкладки расположено ниже контента, позже, Вы поймёте почему. А теперь CSS-код:

.tabs {

  float: left; /* Все вкладки располагаем в одну строку */

  margin: 10px; /* Отступы вкладок друг от друга */

}

.content {

  display: none; /* Скрываем содержимое */

  padding-top: 20px; /* Чтобы название вкладки было ниже содержимого */

  position: absolute; /* Чтобы содержимое не двигало элементы на странице */

}

.tabs:active .content {

  display: block; /* Когда кликаем по вкладке, открываем содержимое content */

}

.content:hover {

  display: block; /* Пока курсор наведён на контент, не закрываем его */

}

Алгоритм следующий, при клике по названию вкладки, автоматически срабатывает псевдоэлемент active, но поскольку он будет работать только при нажатой клавиши, то стоить нам отпустить, как контент закроется. Чтобы этого не было, мы добавляем условие, что если курсор наведён на контент (псевдоэлемент hover), то он не будет закрываться. А для того, чтобы кликнув по вкладке, наш курсор автоматически оказался бы и на контенте, мы и расположили кнопку ниже контента, а также сделали ещё и поле сверху. Таким образом, кликнув по названию вкладки, мы кликаем и по контенту тоже, поэтому после клика мы можем смело отпустить кнопку мыши, и у нас продолжит «держать» контент наведение курсора.

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

• 
  Создано 17.10.2012 07:38:03

• 
  
  Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. 
   Кнопка:
   
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. 
   Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Потрясающие эффекты для кнопок при нажатии

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

Полный набор эффектов для кнопок можно посмотреть ниже:

Смотреть примерСкачать

Также рекомендую посмотреть похожие статьи на эту тему:

HTML

Для начала подключаем между тегами <head> </head> следующие стили (normalize.css, Font Awesome, demo.css, component.css):

HTML КОД

1
2
3
4

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

В качестве примера будем рассматривать эффект BORIS. Начнем со HTML структуры кнопок:

HTML КОД

1
2
3
4

<button>
    <i></i>
    <span>Backward</span>
</button>

Обычный тег кнопки <button> <button> внутри которого есть иконка.

CSS

Хотя мы уже подключили файл стилей component.css, я всё же хочу немного прокомментировать его содержимое.

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

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

.cbutton {
    position: relative;
    display: inline-block;
    margin: 1em;
    padding: 0;
    border: none;
    background: none;
    color: #286aab;
    font-size: 1.4em;
    overflow: visible;
    -webkit-transition: color 0.7s;
    transition: color 0.7s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
.cbutton.cbutton--click,
.cbutton:focus {
    outline: none;
    color: #3c8ddc;
}
 
.cbutton__icon {
    display: block;
}
 
.cbutton__text {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
 
.cbutton::after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px 0 0 -35px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    content: '';
    opacity: 0;
    pointer-events: none;
}
 
.cbutton--box {
    width: 24px;
    height: 24px;
    border: 4px solid rgb(22, 35, 47);
}
 
.cbutton--box-color-1 {
    background: #ff8b00;
}
 
.cbutton--box-color-2 {
    background: #b61854;
}
 
.cbutton--box-color-3 {
    background: #1d5cab;
}
 
.cbutton--box-color-4 {
    background: #f2438c;
}
 
.cbutton--box-color-5 {
    background: #ff6414;
}
 
.cbutton--box-color-6 {
    background: #5ed500;
}
 
.cbutton--box-color-7 {
    background: #0077ff;
}
 
.cbutton--box-color-8 {
    background: #7bff00;
}
 
.cbutton--box-color-9 {
    background: #fff;
}

А сейчас я привожу стили уже конкретно для эффекта, который мы рассматриваем в качестве примера:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.cbutton--effect-boris::after {
    background: rgba(111,148,182,0.1);
}
 
.cbutton--effect-boris.cbutton--click::after {
    -webkit-animation: anim-effect-boris 0.3s forwards;
    animation: anim-effect-boris 0.3s forwards;
}
 
@-webkit-keyframes anim-effect-boris {
    0% {
        -webkit-transform: scale3d(0.3, 0.3, 1);
        transform: scale3d(0.3, 0.3, 1);
    }
    25%, 50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(1.2, 1.2, 1);
        transform: scale3d(1.2, 1.2, 1);
    }
}
 
@keyframes anim-effect-boris {
    0% {
        -webkit-transform: scale3d(0.3, 0.3, 1);
        transform: scale3d(0.3, 0.3, 1);
    }
    25%, 50% {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(1.2, 1.2, 1);
        transform: scale3d(1.2, 1.2, 1);
    }
}

Анимация «разводов» и других эффектов для кнопки после нажатия создается с помощью ключевых кадров, которые стали доступны в CSS3.

Javascript

Но это еще не всё. Нам необходимо как-то применить анимацию после клика. То есть необходимо задать стили кнопке после того как кнопка была нажата. Лучшим способом это сделать — с помощью jQuery.

Сперва подключаем необходимые библиотеки(modernizr.custom.js и classie.js):

HTML&JS КОД

1
2

<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>

После чего добавляем небольшой код, который и будет добавлять новый класс нашей кнопке при клике на нее:

HTML&JS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

(function() {
    function mobilecheck() {
        var check = false;
        (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
        return check;
    }
 
    var support = { animations : Modernizr.cssanimations },
        animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
        animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
        onEndAnimation = function( el, callback ) {
            var onEndCallbackFn = function( ev ) {
                if( support.animations ) {
                    if( ev.target != this ) return;
                    this.removeEventListener( animEndEventName, onEndCallbackFn );
	            }
                if( callback && typeof callback === 'function' ) { callback.call(); }
            };
            if( support.animations ) {
                el.addEventListener( animEndEventName, onEndCallbackFn );
            }
            else {
                onEndCallbackFn();
            }
        },
        eventtype = mobilecheck() ? 'touchstart' : 'click';
 
        [].slice.call( document.querySelectorAll( '.cbutton' ) ).forEach( function( el ) {
            el.addEventListener( eventtype, function( ev ) {
                classie.add( el, 'cbutton--click' );
                onEndAnimation( classie.has( el, 'cbutton--complex' ) ? el.querySelector( '.cbutton__helper' ) : el, function() {
                    classie.remove( el, 'cbutton--click' );
                } );
            } );
        } );
})();

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

Успехов!

Источник: Оригинал

С Уважением, Бышкин Константин

Отслеживание событий с помощью CSS селекторов в Google Tag Manager — ppc.world

Селекторы CSS — это шаблоны, которые вы можете проверить в любом элементе HTML. Традиционно CSS-селекторы использовались для изменения стилей данных элементов.

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

В статье мы рассмотрим, как настроить отслеживание двух типов событий:

1. Нажатие на кнопку или какой-либо другой элемент на вашем сайте.
2. Успешную отправку формы.

Отслеживание нажатий на элемент с помощью селектора CSS

Вот как будет выглядеть весь процесс на примере отправки событий в UA:

1. Найдите CSS селектор элемента, который вы хотите отслеживать.
2. Создайте новый тег типа Universal Analytics, который отправляет данные о событиях в GA.
3. Проверьте тег через отладчик, затем опубликуйте контейнер.

Предположим, вы хотите отслеживать клики по кнопке «Контакты»‎:

Поиск CSS селектора с помощью консоли разработчика

1. Кликните правой кнопкой на элемент (Контакты) → Просмотреть код. Откроется консоль разработчика.

2. Кликните правой кнопкой на код элемента.

3. Скопируйте селектор.

Готово. Переходите к шестому шагу.

Расширение SelectorGadget в Google Chrome для поиска CSS-селектора элемента страницы

Подробнее остановимся на поиске селектора при помощи инструмента SelectorGadjet. Следуйте инструкциям ниже.

Шаг 1: Установите расширение SelectorGadget.

Шаг 2: Перейдите на страницу с элементом, клик на которой вы хотите отслеживать.

Шаг 3: Чтобы включить расширение, нажмите на значок SelectorGadjet (в правой верхней части окна браузера):

Шаг 4: Теперь нажмите на «Контакты» и скопируйте соответствующий селектор CSS, который отобразился в инструменте «SelectorGadget»:

В нашем случае отслеживаемый элемент имеет уникальный класс ff_meb, соответственно, селектор CSS будет: .ff_meb. Точка в этом случае обозначает, что это класс.

Шаг 5: Отключите расширение SelectorGadget, снова щелкнув на значок (в правой верхней части окна браузера).

Шаг 6: Перейдите к своей учетной записи GTM и создайте новый тег типа Universal Analytics. Назовите тег, например: «Клик по кнопке Контакты»‎.

Шаг 7: Задайте следующую конфигурацию:

Шаг 8: Создайте новый триггер со следующей конфигурацией:

В качестве оператора выбираем «Соответствует селектору CSS».

Шаг 9: Сохраните тег, а затем перейдите в режим предварительного просмотра.

Шаг 10: Обновите страницу сайта и кликните на «‎Контакты». Если ваш тег отображается в разделе Tags Fired On This Page, значит, что тег срабатывает при нажатии соответствующей кнопки.

Шаг 11: Вернитесь к своей учетной записи GTM и затем нажмите «Выйти из режима предварительного просмотра»‎.

Шаг 12: Опубликуйте контейнер.

Таким образом вы можете использовать CSS селекторы для отслеживания кликов на своем сайте с помощью GTM.

Отслеживание событий по отправке форм с помощью триггера «Доступность элемента»

Такой способ отлично подходит в случае, если невозможно использовать стандартный триггер для отслеживания форм «Отправка формы»‎. Триггер «Доступность элемента«‎ можно использовать как альтернативу способу с технологией AJAX, когда при отправке формы пользователя не перенаправляет на новую страницу.

Итак, начнем.

Шаг 1: Перейдите на страницу с формой, которую вы хотите отслеживать.

Шаг 2: Заполните каждое поле и нажмите «Отправить». Удостоверьтесь, что в ответ не пришло сообщение об ошибке.

Шаг 3: При успешной отправке обычно приходит сообщение благодарности. То, что нам нужно.

Шаг 4: Скопируйте CSS селектор этого элемента, открыв консоль разработчика.

В нашем случае отслеживаемый элемент имеет уникальный ID #nf-form-1-cont, соответственно, селектор CSS будет: #nf-form-1-cont > div > div.nf-response-msg > p. Решетка в данном случае обозначает, что это ID элемента.

Шаг 5: Перейдите к своей учетной записи GTM и создайте новый тег типа Universal Analytics. Назовите его «Успешная отправка заявки».

Шаг 6: Задайте следующую конфигурацию:

Шаг 7: Создайте новый триггер со следующей конфигурацией:

Шаг 8: Сохраните тег и перейдите в режим предварительного просмотра. Обновите страницу вашего сайта.

Шаг 9: Перейдите на страницу с формой, отправку которой нужно отследить.

Шаг 10: Заполните форму и нажмите кнопку «Отправить». Убедитесь, что в ответ не пришло сообщение об ошибке.

Шаг 11: Ниже в отладчике вы увидите теги, которые сработали на этой странице. Если тег отображается в разделе Tags fired on this page‎, значит, что он срабатывает при успешной отправке формы.

Шаг 12: Вернитесь к своей учетной записи GTM и затем нажмите «Выйти из режима предварительного просмотра»‎.

Шаг 13: Опубликуйте контейнер.

Вуаля! Готово.

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

У вас бывало такое, что элемент на странице не реагировал на клик, пока вы не нажмёте на определённую его область?

Это происходило потому, что не весь элемент был кликабельным. Чтобы стало понятнее, посмотрите на картинку ниже — на ней видно, какой должна и не должна быть область клика:

В этой статье, мы рассмотрим несколько распространённых проблем с UX, а в конце покажем наглядный пример с нашего сайта.

UX-решения

Рекомендации WCAG

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

Закон Фиттса

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

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

Далее рассмотрим реальные примеры, в которых также учитываются рекомендации WCAG 2.5.5 и закон Фиттса.

Кнопки

При необходимости можно использовать элемент <button>. Рассмотрим этот случай на существующей системе интернет-банкинга:

<div>Next</div>

Вот так выглядит эта кнопка:

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

Благодаря HTML-элементу <button>, пользователь сможет:

• выбирать кнопку с помощью клавиатуры;
• нажимать на кнопку с помощью мыши, клавиатуры или касания.

Кроме того, его можно реализовать без JavaScript.

Кнопкам нужны внутренние отступы, и вот почему:

• тексту не должно быть «тесно»;
• большую кнопку проще заметить (Закон Фиттса).

Ссылки

Эта ошибка встречается в интернете довольно часто. Если перед вами меню навигации, padding должен быть у элемента <a>, а не <li>.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><nav href="#">Products</nav></li>
    <li><a href="#">Store</a></li>
    <li><a href="#">Team</a></li>
  </ul>
</nav>

.nav-item {
  padding: 12px 16px;
}

С таким кодом кликнуть можно будет только на текст:

Чтобы этого избежать, необходимо добавить padding к самой ссылке. Обратите внимание, что нижний и верхний отступ не будут работать по умолчанию, так как это встроенные элементы. Для этого можно использовать block, inline-element или flex.

.nav-item a {
  display: block;
  padding: 12px 16px;
}

Теперь вся область ссылки станет доступна для клика:

Гамбургер-меню

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

Предположим, что так выглядит область нажатия:

Попасть пальцем в такой маленький объект сложно. Но если увеличить эту область, то всё станет гораздо проще:

Можете попробовать самостоятельно в этом демо.

Чекбоксы и радио-кнопки

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

На скриншоте ниже область клика привязана только к переключателю поэтому нажатие на текст ни к чему не приведёт:

Эту ситуацию можно решить, если в HTML связать label и input, используя атрибут for:

<input type="checkbox">
<label for="option1">Option 1</label>

Или поместить input внутрь label:

<label for="option1">
    Option 1
    <input type="checkbox">
</label>

После нужно добавить padding для <label>, чтобы область клика стала больше:

Сайдбар

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

Чтобы исправить эту ситуацию, нужно:

1. Удалить отступ из элемента <li> и переместить его в элемент <a>, как в пункте «Ссылки».
2. Добавить display: block.

.nav-item a {
    /*Other styles*/
    padding: 12px 16px;
    display: block;
}

После того, как будут выполнены эти действия, получим:

Примеры

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

Заголовок раздела

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

Как правило, интервал вокруг стрелки может быть сделан в CSS, с помощью свойства padding или width и height.

Использование псевдоэлементов для увеличения области клика

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

Как это работает?

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

Ниже псевдоэлемент :after добавлен к кнопке меню:

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}

Квадрат 55px специально расположен справа от элемента для наглядности.

Смотрите гифку ниже или попробуйте демо на Codepen.

Пример с нашего сайта

Недавно мы обнаружили на нашем сайте проблему: при попытке нажать на лайк с телефона на главной странице происходит переход на статью. Разобравшись в вопросе, оказалось, что рекомендуемый размер элемента для клика на touchscreen 48×48 dp. Иначе по нему сложно попасть на мобильных.

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

Сейчас вот так:

Нужно вот так:

Как видно, кнопка осталась на своём месте, но область клика/тапа стала больше. При этом важно следить, чтобы области не пересекались.

Один из вариантов для лайков (не самый красивый, но рабочий)

.post-votes {
 margin: 0 5px;
}
 
.svelte-15n67pa {
 padding: 9px;
 margin: -9px;
} /* кнопки вверх/вниз */

Ещё круче вот так:

Код для правой кнопки (для левой зеркально):

padding: 14px 14px 14px 7px; 
margin: -14px -14px -14px -7px;

Адаптированный перевод статьи «Enhancing The Clickable Area Size»

24

Свойство touch-action CSS

От автора: свойство touch-action CSS определяет, может ли пользователь взаимодействовать с элементом на экране с помощью касаний, используя стандартные возможности браузера, а также как это будет происходить. Например, панорамирование и зум.

События касаний – это Web API, позволяющее браузеру интерпретировать действия пальцами или стилусом на сенсорном экране или трекпаде. Обычно события касаний мы обрабатываем через JS, однако touch-action позволяет информировать браузер о намерениях приложения еще до срабатывания обработчиков событий.

Результат касания элемента зависит от значения свойства touch-action и стандартных настроек касания элемента и его предков. Разработчики могут выборочно отключать стандартное поведение при касании экрана, предотвращая тем самым отправку, если поведение не требуется.

Свойство touch-action применяется только к элементам, которые поддерживают оба CSS-свойства width и height. Элементам без явно прописанных размеров типа span можно задать свойство display в значение, поддерживающее width и height, например, block.

Синтаксис

Синтаксис: touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] ] | manipulation

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Изначально: auto

Применяется к: всем элементам кроме: незаменяемых инлайновых элементов, строк таблиц, групп строк, колонок таблиц и групп колонок

Анимируется: нет

Значения

auto. Значение по умолчанию. Браузер пользователя может определить разрешенное поведение при касании элемента.

manipulation. На элементе разрешено панорамирование и зум пальцами. Можно считать сокращением для pan-x pan-y pinch-zoom. Дополнительные нестандартные жесты типа двойного тапа запрещены.

none. На элементе запрещены стандартные поведения при касании.

pan-x. Разрешено панорамирование пальцами по оси Х. Можно совместить с pan-y, pan-up, pan-down и зумом пальцами. См. официальный синтаксис.

pan-y. Разрешено панорамирование пальцами по оси Y. Можно совместить с pan-x, pan-up, pan-down и зумом пальцами. См. официальный синтаксис.

pan-left. Панорамирование пальцами разрешено только, если действие начинается с панорамирования влево. То есть пользователь перемещает палец вправо. После начала прокрутки направление можно изменить на противоположное.

pan-right. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вправо. То есть пользователь перемещает палец влево. После начала прокрутки направление можно изменить на противоположное.

pan-up. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вверх. То есть пользователь перемещает палец вниз. После начала прокрутки направление можно изменить на противоположное.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

pan-down. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вниз. То есть пользователь перемещает палец вверх. После начала прокрутки направление можно изменить на противоположное.

pinch-zoom. Разрешен зум несколькими пальцами. Можно совместить с pan-x, pan-left, pan-right, pan-y, pan-up, pan-down. См. официальный синтаксис.

Примеры

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

.element {
touch-action: none;
}

Также с помощью touch-action можно удалить задержку в 350ms перед активацией единичными тапами ссылок и кнопок. Задержка задана в браузере по умолчанию, чтобы проверить, что пользователь действительно тапнул всего один раз. Однако такое поведение делает сайт менее адаптивным. Если задать touch-action в manipulation, то любое касание элемента будет запускать только панорамирование или зум. Жесты двойного нажатия будут игнорироваться, одиночные нажатия будут выполняться без задержки.

.element {
touch-action: manipulation;
}

Другой вариант использования touch-action – настройка поведения overscroll (частое поведение типа «потяни, чтобы обновить»). На контейнере можно задать свойство touch-action в pan-x pan-down, когда позиция скрола равна 0, и pan-x pan-y, когда позиция скрола равна любому другому значению. Это значит, что если пользователь потянет экран пальцем вниз, когда позиция скрола контейнера находится в самом верху, то сработает обработчик события pointer.

Демо

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

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

Свойство touch-action

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

Поддерживается со следующих версий:

Автор: Hui Jing Chen

Источник: //tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Html Css Git Отправка на удаленный

Обзор

Сага о коллекции штампов Саймонса продолжается … В этом уроке мы узнаем о преимуществах отправки нашего кода на удаленные серверы.

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

Цели

1. Список преимуществ удаленного хранения кода
2. Создать новый удаленный репозиторий
3. Добавить новые пульты в локальный репозиторий
4. Отправляет коммиты в удаленный источник

Вы действительно прекрасное репо, вы не поддержите это!

Посмотрите видео ниже, если вы не знакомы с Git.Мы будем использовать Git для доступа к материалам курса, а также для совместного использования кода проекта и совместной работы над ним на протяжении всего курса. После просмотра видео вы можете использовать приведенный ниже текст, чтобы просмотреть все темы, обсуждаемые в видео.

Обратите внимание, , что видео использует терминал вашего компьютера, но в этом курсе вы будете использовать Learn IDE, и команды Git, которые вы изучите в этом уроке, будут работать на нем так же, как и на вашем терминале.

Преимущества синхронизации с пультом дистанционного управления

До сих пор мы узнали, как создавать новые репозитории, промежуточные файлы и фиксировать наши изменения, а также как регистрировать наши коммиты и даже как вернуться к предыдущей фиксации.Теперь давайте рассмотрим способ безопасного резервного копирования нашего кода и размещения его в удаленном месте, которым мы можем легко поделиться с другими. Закон Мерфи гласит, что «все, что может пойти не так, пойдет не так». Иногда наше оборудование ломается, и когда у нас есть важный код, его недостаточно хранить локальную копию. Уведомляя наш локальный репозиторий (тот, который находится на вашем компьютере) об удаленном месте, куда мы можем отправить наш код, мы гарантируем, что если что-то случится с нашей копией, там будет другая копия в другом месте. Как уже упоминалось, это также создает идеальный способ поделиться нашим кодом с другими.

Использование Github для создания

Для начала взглянем на Github.com. Как говорится на их веб-сайте, «GitHub — это то, как люди создают программное обеспечение». Этот сайт предлагает бесплатное публичное и платное частное пространство для размещения репозиториев Git в Интернете. Он также дает нам инструменты для создания копий чужого кода, общения и комментирования кода, а также публикации проблем, связанных с кодом.

Давайте начнем с создания нового репозитория на Github для синхронизации с нашим локальным репозиторием. После входа в систему щелкните значок + плюс, расположенный в правом верхнем углу навигации.Затем выберите новый репозиторий . Под именем репозитория введите то же имя, что и у нашего локального репозитория simon-stamp-collection . Затем нажмите Создать репозиторий . Затем в разделе «Быстрая настройка» скопируйте URL-адрес SSH и вернитесь к терминалу в своей среде Learn IDE и введите: git remote add origin <вставьте сюда URL-адрес SSH> , например, моя команда была: git remote add origin [email protected] : jongrover / simon-stamp-collection.git . Затем нажмите return. Здесь мы связали наш локальный репозиторий с новым удаленным компьютером с меткой origin и указали его на SSH-расположение удаленного репозитория на Github.Ярлык «origin» — это просто соглашение об именах, которое относится к вашей личной копии удаленного репозитория.

Примечание: я использовал URL-адрес SSH для связи с моим пультом дистанционного управления. Мы также могли использовать HTTP, нажав кнопку для HTTP в разделе быстрой настройки на странице Github после создания репо. HTTP требует, чтобы вы вводили свое имя пользователя и пароль каждый раз, когда вы нажимаете или извлекаете удаленный доступ. Преимущество SSH заключается в том, что Github определяет, что у вас есть разрешение на отправку и извлечение, на основе сопоставления открытых и закрытых ключей SSH (своего рода цифровое рукопожатие).Таким образом, нет необходимости вводить имя пользователя или пароль, чтобы нажимать и тянуть. Скорее всего, ваши ключи SSH уже были настроены во время настройки среды для этого курса. В противном случае вы можете следовать инструкциям по ссылкам на ресурсы внизу этого урока.

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

Список пультов

Мы можем создать столько пультов, сколько захотим для данного репо.Иногда приятно их перечислить. В Терминале введите команду git remote -v и нажмите return. Эта команда выводит список всех пультов дистанционного управления, а флаг -v «verbose» перечисляет URL-адрес, на который указывает наша удаленная метка origin. Эта команда вернет такой ответ:

  происхождение [email protected]: jongrover / simon-stamp-collection.git (выборка)
origin [email protected]: jongrover / simon-stamp-collection.git (нажмите)
  

Это указывает на один удаленный объект с именем «origin», который мы можем читать (извлекать) и записывать (push).

Скрытая папка .git

Внутри всех репозиториев находится скрытая папка .git . Мы можем увидеть это, набрав ls -a , чтобы просмотреть и отобразить все скрытые файлы и папки. Мы видим, что он находится внутри нашей папки simons-stamp-collection . Давайте откроем эту папку внутри нашего редактора кода. Затем щелкните, чтобы открыть файл config .

В LearnIDE введите cat .git / config , чтобы просмотреть скрытый файл в терминале.

Должно получиться примерно так:

  [основной]
    repositoryformatversion = 0
    filemode = true
    голый = ложь
    logallrefupdates = истина
    ignorecase = true
    precomposeunicode = ложь
[удаленное "происхождение"]
    url = [email protected]: jongrover / simon-stamp-collection.git
    выборка = + ссылки / головы / *: ссылки / удаленные / происхождение / *
[ветка «мастер»]
    удаленный = происхождение
    слияние = ссылки / головы / мастер
  

Этот файл содержит детали конфигурации для нашего репо.Обратите внимание, что здесь мы также можем видеть пульты, такие как [remote "origin"] , который указывает на url = [email protected]: jongrover / simon-stamp-collection.git . Если бы мы когда-либо хотели изменить местоположение, на которое указывает этот пульт, мы могли бы просто заменить URL-адрес, следующий за URL-адресом url = , сохранить файл и выйти. В нашем случае все выглядит так, как должно, поэтому мы пока закроем этот файл и вернемся в Temrinal.

Нажать

Теперь, когда мы добавили пульт с помощью git remote , добавьте .Теперь у нас есть возможность писать наш локальный код на удаленном компьютере. Для этого мы используем команду push. В типе терминала: git push -u origin master , затем нажмите return. Это должно привести к ответу, подобному следующему.

  Подсчет объектов: 6, выполнено.
Дельта-сжатие с использованием до 4 потоков.
Сжатие объектов: 100% (4/4), готово.
Запись объектов: 100% (6/6), 591 байт | 0 байт / с, готово.
Всего 6 (дельта 0), повторно используется 0 (дельта 0)
На [email protected]: jongrover / simon-stamp-collection.мерзавец
 * [новая ветка] мастер -> мастер
Мастер ветки настроен для отслеживания удаленного мастера ветки от источника.
  

Давайте посмотрим на нашу команду: git push -u origin master Команда push принимает флаги (параметры), затем удаленное имя, затем имя ветки. Здесь наша опция -u устанавливает отслеживание между нашей локальной веткой и нашей удаленной ветвью, чтобы мы знали, опережает ли когда-либо один или отстает от него с точки зрения коммитов. Это рекомендуется делать только один раз, когда мы впервые запускаем новые ветки.После этого мы можем оставить его для существующих веток просто как git push origin master . Следующий аргумент — это удаленное имя «origin» и, наконец, ветка, которую мы нажимаем «master».

Теперь, если вы вернетесь в этот репозиторий в своем браузере на Github.com и обновите страницу, вы увидите, что наши файлы отображаются в списке файлов, а под ним отображается README. Аккуратный! Вы только что написали свою работу на пульт. 🙂

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

Сводка

• Сохранение кода удаленно спасает нас от потери нашего кода, если наше оборудование когда-либо выйдет из строя.
• Чтобы создать новый удаленный репозиторий с нуля, перейдите в github и щелкните значок + плюс в верхней части навигации.
• Чтобы научить наше локальное репо об удаленном компьютере, который мы хотим синхронизировать, используйте команду git remote add origin <вставить в SSH url здесь> .
• Чтобы отправить наш код после добавления и фиксации, введите git push .

Ресурсы

Просмотрите HTML CSS Git Pushing to the Remote на Learn.co и начните бесплатно учиться программировать.

Нажмите и получите

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

Я полностью понимаю push (каламбур), чтобы это произошло. Вездесущее мнение, что мы хотим, чтобы Интернет выиграл , как и должно быть в этой отрасли.Проигрыш в сети означает проигрыш нативным приложениям на всех различных платформах. Нативные приложения — это не зло или что-то в этом роде — они просто конкурируют и исключают людей, в отличие от Интернета. Сделать Интернет жизнеспособной платформой для любого типа «приложений» — это победа для нас и победа для людей.

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

Мы видим такие статьи, как Moses Kim’s Don’t @ me:

Push-уведомления — классический пример того, как хорошие намерения UX пошли не так, потому что мы не знаем границ.

Мало кто хвалит push-уведомления. И все еще! Джереми Кейт написал отличный эксперимент Себастьяна Андевега. Вместо надоедливого и навязчивого push-уведомления…

Вот что Себастьян хотел исследовать: что, если бы этот последний шаг не был таким навязчивым? Вот альтернативный поток, который он хотел проверить:

1. Веб-сайт запрашивает у пользователя разрешение на отправку push-уведомлений.
2. Пользователь предоставляет разрешение.
3. За кулисами происходит множество сложных вещей.
4. В следующий раз, когда веб-сайт публикует что-то релевантное, он запускает push-сообщение, содержащее сведения о новом URL-адресе.
5. Сервисный работник пользователя получает push-сообщение (даже если сайт не открыт).
6. Service worker извлекает содержимое URL-адреса, указанного в push-сообщении, и кэширует страницу. Молча.

Сработало.

Представьте себе приложение для подкастов PWA, которое работает в автономном режиме и незаметно принимает и кэширует новые подкасты.Милая. Теперь нам нужна модель разрешений, которая позволяет делать тихие уведомления.

Обновление: Вот следующая статья Себастьяна Андевега «PushAPI без уведомлений», в которой он подробно описывает мысли, код и демонстрацию всего этого.

Следует ли комбинировать HTTP / 2 Push и встроенный критический CSS?

№

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

Урок

На всякий случай, если вы читаете это и не знаете, что такое HTTP / 2 Push или Critical CSS, вот мой краткий обзор:

HTTP / 2 Push — это функция, с помощью которой вы можете автоматически отправлять ресурсы в браузер до того, как браузер будет запрашивать их при анализе вашего HTML. Это похоже на использование предварительной нагрузки, но намного быстрее. Требуется сервер, поддерживающий HTTP2.

Critical CSS — это метод размещения встроенного важного CSS в вашего документа и асинхронной загрузки остального CSS.Это останавливает блокировку рендеринга CSS, избегая при этом отображения страницы без стиля.

Найди отличия

Ниже приведены результаты теста веб-страницы (соединение 3G) для той же страницы с использованием различных методов загрузки CSS:

Ниже приведено сравнение результатов с основным браузером. резьба графика.

Простой CSS

Встроенный критический CSS

Встроенный критический CSS и HTTP / 2 Push

Только HTTP / 2 Push

Как вы увидите, за исключением времени до первого байта, результаты при использовании HTTP / 2 значительно ниже, чем при использовании всех других методов. Основная ветка браузера также подвергается гораздо меньшей нагрузке.

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

Только при измерении с использованием традиционного подхода с блокировкой рендеринга все обретало смысл. Теперь я пришел к выводу, что использование HTTP / 2 Push намного превосходит любые другие методы загрузки CSS.

Это еще не окончательно

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

Мое первоначальное мнение при создании веб-сайта, используемого в этих тестах, заключалось в том, что добавление HTTP / 2, а также критического CSS вряд ли окажет какое-либо отрицательное влияние на скорость загрузки веб-сайта. Это верно только по сравнению с использованием только Critical CSS.

Но, учитывая результаты, я с уверенностью могу сказать, что если у вас есть доступный HTTP2 / Push, нет абсолютно никакой необходимости включать критические методы CSS, поскольку вы просто не увидите преимуществ использования HTTP / 2 Push при объединении два.

Сетка

— Материализация

Мы используем стандартную 12-колоночную систему динамической сетки. Сетка помогает упорядочить и упорядочить страницу.

Контейнер

Класс контейнера не является строго частью сетки, но важен при компоновке содержимого. Это позволяет центрировать содержимое страницы. Контейнер класс установлен на ~ 70% ширины окна. Это помогает вам центрировать и удерживать содержимое вашей страницы.Мы используем контейнер для содержания нашего тела.

Демо

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

Отключить контейнеры

Чтобы добавить контейнер, просто поместите свой контент в тег

 
    

      
 1 
      
 2 
      
 3 
      
 4 
      
 5 
      
 6 
      
 7 
      
 8 
      
 9 
      
 10 
      
 11 
      
 12 
    
            

 
    

      
 Ширина этого блока составляет 12 столбцов для всех размеров экрана 
      
 6 столбцов (половина) 
      
 6 столбцов (половина) 
    
            

 
    

      
  Ширина этого блока составляет 12 столбцов для всех размеров экрана  
      
  6 столбцов (смещение на 6)  
    
            

 
    

      
  Ширина этого блока составляет 7 столбцов, он сдвинут вправо на 5 столбцов. 
      
  шириной 5 столбцов, сдвинутых влево 7 столбцами.  
    
            

 
  
 
  

    
 Раздел 1 
    
 Материал 
  
  
 
  

    
 Раздел 2 
    
 Материал 
  
  
 
  

    
 Раздел 3 
    
 Материал 
  
            

 
    

      
  Я всегда на всю ширину (col s12)  
      
  На мобильном устройстве я во всю ширину (col s12 m6)  
    
            

 
  

    
 
 s12 
 
    
 
 s12 m4 
 
    
 
 s12 m4 
 
    
 
 s12 m4 
 
  
  

    
 
 s12 m6 l3 
 
    
 
 s12 m6 l3 
 
    
 
 s12 m6 l3 
 
    
 
 s12 m6 l3 
 
  
              

 
rtmp: // 3891.livepush.myqcloud.com/live/3891_test?bizid=3891&txSecret=xxx&txTime=58540F7F
  

  толчок (element0)
push (element0, element1)
push (element0, element1, ..., elementN)
  

  let sports = ['футбол', 'бейсбол']
let total = sports.push ('футбол', 'плавание')

console.log (спорт)
console.log (всего)
  

  пусть овощи = ['пастернак', 'картофель']
let moreVegs = ['сельдерей', 'свекла']


овощи.push (... moreVegs);

консоль.журнал (овощи)
  

  let obj = {
    длина: 0,

    addElem: function addElem (elem) {
        
        
        [] .push.call (это, элемент)
    }
}


obj.addElem ({})
obj.addElem ({})
console.log (длина объекта)

  

  

        
 Чай месяца 
        
 Что настаивается в The Tea Cozy? 
    
    

        <рисунок>
            
            
        
        <рисунок>
            
            
        
        <рисунок>
            
            
        
        <рисунок>
        
            
            
        
        <рисунок>