<a>
Никита Дубко, разработчик интерфейсов
Web Standards Days, 7 декабря 2019, Минск
Кто я?
- доброжелюбный бородач
- соорганизатор MinskCSS, MinskJS
и CSS-Minsk-JS
- редактор новостей в Веб-стандартах
- разработчик интерфейсов в Яндекс.Поиске
Поиск — это:
- 1 инпут;
- 1 кнопка;
- 10 ссылок;
- иногда колдунщики.
≈ 40 000 000 000
ссылок в день
Первые теги
<TITLE><NEXTID 27><A NAME=xxx HREF=XXX><ISINDEX><PLAINTEXT><LISTING><P><H1>–<H6><ADDRESS><HP1>, <HP2><DL>, <DT>, <DD><UL>, <MENU>, <DIR>
HTML Tags
<A HREF="page.html"
NAME=1
TYPE=void>
...
</A>
anchoraddress
docaddress [ # anchor ]
docaddress
httpaddress | fileaddress | newsaddress | telnetaddress | prosperoaddress | gopheraddress | waisaddress
httpaddress
h t t p : / / hostport [ / path ] [ ? search ]
prosperoaddress
p r o s p e r o : / / hostport / path
fileaddress
f i l e : / / host / path
newsaddress
n e w s : groupart
waisaddress
waisindex | waisdoc
waisindex
w a i s : / / hostport / database [ ? search ]
waisdoc
w a i s : / / hostport / database / wtype / digits / path
...
W3 address syntax: BNF
Поддерживаемые протоколы
- http
- file
- news
- telnet
- prospero
- gopher
- wais
- x500
<a href="doc.pdf"
download
type="application/pdf"
hreflang="en"
ping="./trackpings"
rel="noopener"
target="_self">
...
</a>
<a>: The Anchor element
Адрес можно скопировать и открыть в другой вкладке
href
<a href="another.html">Text</a>
<a href="https://absolute.url/page/">Page</a>
<a href="mailto:johndoe@mail.kk">Send mail</a>
<a href="tel:+123456789">Call me</a>
download
<a href="code-of-conduct.pdf" download>
Code of Conduct
</a>
<a href="1h24v9lj.jpg" download="cat">
Kitty photo
</a>
hreflang
<a href="korean.html" hreflang="ko">
Корейская версия
</a>
<a href="english.html" hreflang="en-US">
Английская версия
</a>
lang
ping
<a href="#header"
ping="./tracker">Ping #id</a>
<a href="ping.html"
ping="./tracker">Ping Link</a>
Ping Demo
rel
- alternate
- author
- bookmark
- external
- help
- license
- next
- nofollow
- noopener
- noreferrer
- prefetch
- prev
- search
- tag
Link types
target
_blank — открыть в новой вкладке;_self — открыть в текущем контексте;_parent — открыть в родительском контексте;_top — открыть в верхнем контексте;iframe-name — открыть в контексте с name='iframe-name'.
Target Demo
type
<a href="https://wsd.events" type="text/html">
Web Standards Days
</a>
<a href="doc.pdf" type="application/pdf">
PDF
</a>
MIME type
referrerpolicy
Управляет доступом к заголовку Referer
<a href="https://some-site.com"
referrerpolicy="no-referrer">
External Resource
</a>
Referrer-Policy
Что может быть внутри
href?
- Гиперссылка —
- ссылка на другой ресурс, который обычно предоставляется пользователю юзер-агентом (браузером) так, чтобы пользователь мог заставить юзер-агент перейти к этому ресурсу, например, открыть его в браузере или скачать его.
+37529telecom
⬇️
+375298353266
Compared to RFC 2806, references to carrier selection, dial context,
fax and modem URIs, post-dial strings, and pause characters have been
removed. The URI syntax now conforms to RFC 2396 [RFC2396].
The tel URI for Telephone Numbers
Из браузера можно отправлять письма
mailto:mefody@yandex-team.ru
mailto:mefody@yandex-team.ru
?cc=dark.mefody@yandex.ru,n.a.dubko@gmail.com
&bcc=n.a.dubko@gmail.com
&subject=I%20Love%20Frontend%202020
&body=Хочу%20выступить
The 'mailto' URI Scheme
Из браузера можно открывать приложения
deeplink
<a href="slack://open?team=T12345">Open in Slack</a>
<a href="javascript:void(0);">🤦♂️</a>
<button type="button">👍</button>
<base target="_top"
href="https://my.blog/articles/">
<head>
<base target="_top" href="https://my.blog/articles/">
</head>
<body>
<a href="page-1">Article</a>
<!-- https://my.blog/articles/page-1 -->
<a href="../index.html">Main page</a>
<!-- https://my.blog/index.html -->
</body>
<a href="https://fakebook.com"
rel="noreferrer">
<a href="https://fakebook.com"
rel="noopener">
var win = window.open(url, '_blank');
if (win) {
win.opener = null;
}
<a href="https://not-my.site"
rel="nofollow">
Список всех ссылок в VoiceOver
- ⌘ Cmd + F5
- VO (Caps Lock) + U
- ⟶ Arrow Right или ⟵ Arrow Left
Осмысленный текст для озвучки
Навигация по ссылкам
- ⇥ Tab — следующая
- Shift + ⇥ Tab — предыдущая
- ↵ Enter — переход по ссылке
document.onkeypress = function(e) {
e.preventDefault();
// The Enter/Return key
if (e.keyCode === 13) {
doSomething();
document.activeElement.click();
}
};
😱
a[href^="http"]:not([href^="https://mysite.com"])::before {
content: url('path-to-icon.svg');
}
a[href^="http"]:not([href^="https://mysite.com"])::after {
content: '(откроется в новом окне)';
}
.button2.button2_size_m {
line-height: 44px;
height: 44px;
}
touch-action: manipulation
:link
a:link {
color: orange;
}
:visited
a:visited {
color: darkviolet;
}
Посещённые ссылки — другим цветом
<a class="hidden fb" href="https://facebook.com"></a>
<a class="hidden vk" href="https://vk.com"></a>
<a class="hidden shoes" href="https://shoes.buy"></a>
.fb:visited {
background-image: url('track-fb-users.gif?uid=123');
}
.shoes:visited {
background-image: url('track-shop-users.gif?uid=123');
}
Разрешённые свойства внутри :visited
colorbackground-colorborder-colorcolumn-rule-coloroutline-color- цвета внутри
fill и stroke
Privacy and the :visited selector
<a class="test" href=".">Visited test</a>
.test { color: red; }
.test:visited { color: blue; }
var link = document.querySelector('.test');
window.getComputedStyle(link).color; // rgb(255, 0, 0)
:visited
:hover
a:hover {
color: lightsteelblue;
}
:active, :focus
.link_theme_normal:active,
.link_theme_normal:visited:active {
color: #d00;
}
.utilityfocus .link:focus {
outline: 2px solid #fc0;
}
text-decoration: underline
У пользователя есть привычки
<a href="https://...">
<div>
<h4>Friends of Photography</h4>
</div>
<div>
<h5>Fly with the Monarchs!</h5>
<time datetime="2018-01-29T13:00:00.000-05:00">
<span>Today</span>
<span>1:00 PM</span>
</time>
</div>
</a>
Be nice to screen-reader users
<div class="link-wrapper">
<div>
<h4>
<a href="https://...">Friends of Photography</a>
</h4>
</div>
<div>
<h5>Fly with the Monarchs!</h5>
<time datetime="2018-01-29T13:00:00.000-05:00">
<span>Today</span>
<span>1:00 PM</span>
</time>
</div>
</div>
Be nice to screen-reader users
.link-wrapper {
position: relative;
}
.link-wrapper a::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Be nice to screen-reader users
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
HTML Standard
<a href="#a">
Foo
<object type="owo/uwu">
<a href="#b">
Bar
</a>
</object>
Baz
</a>
Nested Links
Если навигация, то ссылка.
Иначе — кнопка.
(function() {
const wannabeButtons = document.querySelectorAll('[data-button]');
Array.prototype.forEach.call(wannabeButtons, wannabeButton => {
wannabeButton.outerHTML = `
<button data-link="${wannabeButton.href}">
${wannabeButton.textContent}
</button>
`;
const btn = document.querySelector('[data-link="' + wannabeButton.href + '"]');
btn.onclick = () => {
console.log('clicked the button');
};
});
})();
The link to button enhancement
<button>
<a href="link.html">Link Text</a>
</button>
<a rel="prefetch"
href="next.html">
Next Article
</a>
link-api
blocks['link-api'](context, {
url: data.url,
text: data.title,
theme: 'ghost'
});
<Link>
<Link
url={this.props.linkUrl}
onClick={this.handleClick}>
{
this.props.linkText
}
</Link>
Навигация по результатам поиска Яндекса
World Wide Web
Ping Demo
Uniform Resource Identifier (URI): Generic Syntax
The tel URI for Telephone Numbers
Поддержка Internet Explorer
death-to-ie11.netlify.com
Типы устройств
UI Design Do’s and Don’ts
CSS touch-action property
github.com/ftlabs/fastclick
Утерянное искусство оформления посещенных ссылок
Стрелка и пальчик
On Link Underlines
caniuse.com/#search=text-decoration-skip-ink
Firefox 70 — a bountiful release for all
Multi-Line Padded Text
Nested links are illegal
Link types
github.com/GoogleChromeLabs/quicklink
Статья про котиков