rel css что это
Rel css что это
Некоторые возможные значения перечислены ниже.
answer Ответ на вопрос. chapter Раздел или глава текущего документа. co-worker Ссылка на страницу коллеги по работе. colleague Ссылка на страницу коллеги (не по работе). contact Ссылка на страницу с контактной информацией. details Ссылка на страницу с подробностями. edit Редактируемая версия текущего документа. friend Ссылка на страницу друга. question Вопрос.
Весь список значений можно посмотреть по адресу http://wiki.whatwg.org/wiki/RelExtensions
В HTML5 поддерживается следующие значения.
archives Ссылка на архив сайта. author Ссылка на страницу об авторе на том же домене. bookmark Постоянная ссылка на раздел или запись. first Ссылка на первую страницу. help Ссылка на документ со справкой. index Ссылка на содержание. last Ссылка на последнюю страницу. license Ссылка на страницу с лицензионным соглашением или авторскими правами. me Ссылка на страницу автора на другом домене. next Ссылка на следующую страницу или раздел. nofollow Не передавать по ссылке ТИЦ и PR. noreferrer Не передавать по ссылке HTTP-заголовки. prefetch Указывает, что надо заранее кэшировать указанный ресурс. prev Ссылка на предыдущую страницу или раздел. search Ссылка на поиск. sidebar Добавить ссылку в избранное браузера. tag Указывает, что метка (тег) имеет отношение к текущему документу. up Ссылка на родительскую страницу.
Значение по умолчанию
HTML 4.01 IE Cr Op Sa Fx
HTML5 IE Cr Op Sa Fx
Браузеры
Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:
Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:
Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.
Вы можете, также, указать медиа тип или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:
Другие замечания по использованию:
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
auto : указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов.
high : указывает браузеру, что ресурс находится в высоком приоритете.
low : указывает браузеру, что ресурс находится в низком приоритете.
Примечания:
Примечание: Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего sizes содержит только одну запись. MS’s ICO формат, как и Apple’s ICNS. ICO более распространены; вы должны использовать их.
Нестандартные атрибуты
Устаревшие атрибуты
Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.
Стилизация с CSS
Примеры
Включение таблицы стилей
Включение таблицы стилей на страницы имеет следующий синтаксис:
Предоставление альтернативных таблиц стилей
Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.
Предоставление иконок для различных контекстов использования
Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения rel и sizes как подсказки.
Условная загрузка ресурсов с медиавыражениями
Вы можете предоставить тип медиа или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:
События загрузки таблицы стилей
Примечание: Событие load запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.
Что всё это значит?
Перевод: Влад Мержевич
В этой главе мы возьмем веб-страницу и, не делая с ней ничего плохого, улучшим ее. Местами она станет короче, местами длиннее, но она станет семантической. Возрадуемся!
Вот пример страницы. Откройте ее в новой вкладке и не возвращайтесь, пока не посмотрите ее исходный код по меньшей мере один раз.
Доктайп
Посмотрите на первую строку нашего кода.
Она называется доктайп. Это длинная история с черной магией, стоящая за доктайпом. Во время работы над Internet Explorer 5 под Mac его разработчики столкнулись с неожиданной проблемой. Новая версия этого браузера содержала столько улучшений по части стандартов, что старые страницы отображались некорректно. Вернее, отображались они надлежащим образом, по спецификации, но люди считали, что отображаются они неправильно. Авторы страниц при верстке ориентировались на доминирующие браузеры того времени — Netscape 4 и Internet Explorer 4. Браузер IE5/Mac был настолько передовым, что фактически разрушил Сеть.
Эта идея распространилась как лесной пожар и вскоре все основные браузеры имели два режима: «режим совместимости» и «стандартный режим». Конечно, вскоре все это вышло из-под контроля. Когда Mozilla запустила версию 1.1 своего браузера, она обнаружила, что страницы, которые отображаются в «стандартном режиме» в действительности основываются на одной конкретной причуде под именем доктайп. Mozilla подправила свой браузерный движок для устранения этого недостатка и тысячи страниц рассыпались в один миг. Таким образом был создан, и я не выдумываю это, «почти стандартный режим».
В своей основной работе Переключение режимов браузера через доктайп Хенри Сивонен выделил следующие режимы.
Режим совместимости
В режиме совместимости браузеры нарушают современные веб-спецификации и чтобы избежать «рассыпания» страниц отображают их в соответствии с практикой, распространенной в конце 90-х годов.
Стандартный режим
В стандартном режиме браузеры пытаются вывести документы в соответствии со спецификацией в той мере, насколько она реализована в браузере. В HTML5 называется «не режим совместимости».
Почти стандартный режим
Браузеры Firefox, Safari, Chrome, Opera (начиная с 7.5) и IE8 также поддерживают почти стандартный режим, в котором вертикальные размеры ячеек таблиц реализуются традиционно, а не в полном соответствии со спецификацией CSS2. В HTML5 называется «ограниченный режим совместимости».
Вы должны прочитать остальные статьи Хенри, потому что я привел здесь всё упрощённо. Даже в IE5/Mac было несколько вариантов доктайпа. Со временем список особенностей браузеров вырос и вместе с ним увеличился список доктайпов, которые переключают в режим совместимости. В последний раз, когда я занимался подсчётом, было 5 доктайпов для переключения в «почти стандартный режим» и 73 для переключения в «режим совместимости». Вероятно, при этом я пропустил несколько и я ещё молчу про ту сумасшедшую фигню, что делает Internet Explorer 8 для переключения между четырьмя (четырьмя!) режимами отображения. Вот схема. Убейте ее! Убейте и сожгите!
Так, где мы? Ах, да, доктайп.
Если вам нравится этот доктайп, можете оставить его. Или можете изменить доктайп на HTML5, который короче и приятнее, к тому же переключает в «стандартный режим» во всех современных браузерах.
Вот и все. Всего 15 символов. Это так просто, что вы можете набрать его вручную и не выкручиваться.
Корневой элемент
Корневой элемент может выглядеть так.
Ничего плохого в этом коде нет, так что если он вам нравится, можете его оставить, в HTML5 он абсолютно корректен. Но некоторые части уже не требуются, поэтому можно удалить их, тем самым сэкономив несколько байт.
После удаления xmlns останется следующее:
Готовы к выбрасыванию? Если да, то поехали. Едем, едем. приехали. Вот что осталось от нашего корневого элемента.
И это все, что я хотел сказать об этом.
Элемент
Кодировка символов
Когда вы думаете «текст», вы, вероятно, думаете о «знаках и символах, что я вижу на экране моего компьютера». Но компьютерам нет дела до знаков и символов, они имеют дело с битами и байтами. Каждый фрагмент текста, который вы когда-либо видели на экране компьютера, на самом деле хранится в определенной кодировке. Существуют сотни различных кодировок символов, некоторые из них оптимизированы для конкретных языков, таких как русский, китайский или английский, другие могут быть использованы сразу для нескольких языков. Грубо говоря, кодировка символов обеспечивает перевод между тем, что вы видите экране и тем, что компьютер хранит в памяти и на диске.
В действительности, все гораздо сложнее. Некоторые символы могут быть более чем в одной кодировке, каждая кодировка может использовать разные последовательности байтов в зависимости от способа хранения символов. Таким образом, кодировка это своего рода ключ для расшифровки текста. Всякий раз, когда кто-то дает вам последовательность байтов и утверждает что это «текст», вы должны знать, какую кодировку символов они использовали, чтобы суметь перевести байты в символы и вывести их.
Как же фактически ваш браузер определяет кодировку набора байтов, что посылает веб-сервер? Рад, что спросили. Если вы знакомы с HTTP-заголовками, то возможно видели подобный.
Content-Type: text/html; charset=»utf-8″
Эта строка говорит, что веб-сервер считает, что посылает вам HTML-документ в кодировке UTF-8. К сожалению, в Интернете творится каша — некоторые авторы могут контролировать HTTP-сервер, другие же нет. К примеру, сайт blogger.com может содержать различный контент предоставленный разными людьми, но управляется серверами Google. В HTML4 используется способ указания кодировки самостоятельно в любом HTML-документе. Вы, наверное, встречали такую строку.
Эта строка говорит о том, что автор считает, что в HTML-документе применяется кодировка UTF-8.
Это работает во всех браузерах. Выбор этого атрибута продиктован тем, что он уже реализован в браузерах, к тому же люди часто оставляли значение без кавычек.
Спроси профессора Маркапа
☞ В. Я никогда не использую смешные символы. Надо ли мне объявлять мою кодировку?
О. Да, вы всегда должны указывать кодировку на каждой веб-странице. Отсутствие кодировки может привести к уязвимости системы безопасности.
Дружеские отношения
Обычные ссылки всего лишь указатель на другой сайт. Отношения между ссылками это способ пояснить, почему вы указываете на другую страницу. Вот окончания предложения «Потому что. ».
Поведение ссылки на внешние ресурсы зависит от отношения, которое определено для соответствующего типа ссылки.
В примере, что я приводил ранее, только первая ссылка ( rel=»stylesheet» ) указывает на внешний ресурс. Остальные являются гиперссылками на другие документы. Вы можете при желании пройти по этим ссылкам, но они не требуются для просмотра текущей страницы.
Спроси профессора Маркапа
☞ В. Могу я создать свои собственные отношения между ссылками?
О. Кажется, имеется бесконечный запас идей для новых отношений между ссылками. В попытках помешать людям творить фигню WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по прикладным веб-технологиям) ведет реестр предложенных значений rel и устанавливает процесс их принятия.
rel=»stylesheet»
Давайте посмотрим на первую ссылку в нашем примере.
rel=»alternate»
Вернемся к нашей странице.
Ссылка с отношением rel=»alternate» всегда была странным гибридом в использовании, даже в HTML4. В HTML5 ее определение было уточнено и расширено, чтобы более точно описать существующий контент. Как вы видели, использование rel=»alternate» в сочетании с type=application/atom+xml указывает на Atom-фид для текущей страницы. Но вы также можете использовать rel=»alternate» в сочетании с другими значениями type для обозначения того же содержания в другой формат, например PDF.
Другие отношения ссылок в HTML5
rel=»author» используется для ссылки на страницу с информацией об авторе. Это может быть почтовый адрес, хотя и не обязательно. Обычно это ссылка на контактную информацию или страницу «Об авторе».
Запись rel=»external» сообщает, что ссылка ведет на документ, который не является частью сайта. Я считаю, что ее впервые популяризировал WordPress, когда использовал в ссылках комментариев.
Лучший способ подумать о rel=»up» это посмотреть на навигацию в виде хлебных крошек (или представить ее). Главная страница это первая страница в навигации, а текущая страница находится в хвосте. rel=»up» указывает на страницу, следующую за последней в хлебных крошках.
Все основные браузеры поддерживают такое связывание иконки со страницей. Обычно она отображается в адресной строке браузера рядом с URL или во вкладке браузера или в том и другом месте.
Новое в HTML5: атрибут sizes может быть использован для указания размера иконки.
rel=»license» был включен сообществом по микроформатам. Такое отношение означает, что ссылка ведет на страницу с авторскими правами, согласно которым предоставляется текущий документ.
rel=»nofollow» указывает, что ссылка не одобрена автором или издателем страницы или что ссылка на указанный документ включена в основном из-за коммерческих отношений между людьми связанных с этими страницами. Это отношение было изобретено в Google и стандартизировано в сообществе по микроформатам. WordPress вставляет rel=»nofollow» в ссылки, добавленные в комментариях, полагая, что раз ссылки с nofollow не передают PageRank, то спамеры откажутся постить спам в комментариях блога. Этого не произошло, но rel=»nofollow» остался.
rel=»noreferrer» указывает, что информация о реферере не должна утекать при переходе по ссылке. Браузеры не поддерживают это отношение, однако оно недавно было добавлено в браузерный движок Webkit и в конечном итоге появится в Safari, Chrome и других браузерах, основанных на этом движке.
rel=»pingback» указывает адрес пингбэк-сервера. Как поясняется в спецификации, «пингбэк» это способ для блога автоматически оповещать сайты, ссылающиеся на него. Это создает обратную связь — способ пройти назад по цепочке ссылок вместо «прямого прохода». В блогах, частности WordPress, пингбэк-механизм используется для уведомления авторов, что вы ссылаетесь на кого-то при создании новой записи.
rel=»sidebar» показывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера. Что это значит? В Opera и Firefox это реализовано так: когда я щелкаю по ссылке, открывается окно для добавления ссылки в панель закладок. Internet Explorer, Safari и Chrome игнорируют rel=»sidebar» и покажут обычную ссылку.
Новые семантические элементы в HTML5
HTML5 не просто делает существующую разметку компактнее, он также определяет новые семантические элементы.
Практический HTML: улучшаем семантику ссылок
Примечание: ниже перевод статьи «Boost Your Hyperlink Power». В ней освещается использование атрибутов rel и rev, а также некоторые микроформаты.
Часть HTML-тегов и атрибуты мы используем каждый день в свой работе. Заголовки, параграфы, списки и картинки являются основой разметки каждого веб-разработчика. Но наиболее распространенным элементом, наверное, будет ссылка — простой тег, который связывает воедино все страницы, создавая ту самую беспорядочную структуру, которую мы называем Всемирная Сеть Интернет (WWW).
Ссылка как она есть
Теория относительности ( rel ativity)
Может быть, вы уже читали про атрибут rel у ссылки. Я готов поспорить, что в секции head ваших страниц будет располагаться что-нибудь типа этого:
Еще одно распространенное употребление rel :
В данном случае связь между текущим документом и связанным — RSS-лентой — указана как alternate : альтернативное преставление текущего документа.
Вы можете добавить дополнительную информацию к этой ссылке, используя атрибут rel :
Элементарные микроформаты
Эта конструкция описывает, что текущая страница ссылается на документ, помеченный как «лицензия».
Микроформат rel-tag идет немного дальше. Он используется для указания на то, что последняя часть URL’а у ссылки является «меткой» для текущего документа:
В данном случае для этого документа добавлена метка «Microformats».
XFN (XHTML Friends Network) является способом описания отношений между людьми:
Таким образом я указываю, что Drew мой друг, я с ним встречался, и он мой коллега (ведь мы оба фанатеем от интернета (Web monkies)).
«Мы — хотим перемен» ( rev olution)
Разумность большинства
За легкостью использования rel и rev скрывается богатый потенциал. Они позволяет относительно легко добавить в ваши ссылки больше семантического смысла, что создает связи, которые затем могут быть обработы поисковыми роботами, агрегаторами или браузерами. Пусть вашим следующим шагом станет тесное знакомство с этими атрибутами и расширение возможностей ссылок.
Сссылки по теме
1.11.8. Ссылки
Ссылки на внешние ресурсы — это ссылки на ресурсы, которые должны использоваться для дополнения текущего документа (метаданные), обычно автоматически обрабатываемые браузером.
Гиперссылки — это ссылки на другие ресурсы, которые пользователь может посещать в браузере или загружать.
Ссылки в HTML-документах
1. Ссылки, созданные элементами и
Атрибут href задает URL-адрес ссылки.
Атрибут target задает название контекста просмотра, который будет использоваться при переходе по гиперссылкам.
Контекст просмотра — это окружение, в котором браузер отображает документ (обычно это вкладки, однако, возможно окно или фрейм внутри страницы).
Атрибут download указывает, что гиперссылка используется для скачивания файла. Если атрибут имеет значение — имя файла, это позволяет переименовать файл при скачивании.
Атрибут ping задает URL-адреса ресурсов, которые получат уведомления, если пользователь перейдет по гиперссылке.
Атрибут rel дополняет атрибут href информацией об отношении между текущим и связанным документом.
Атрибут hreflang определяет язык связанного веб-документа, который задается аббревиатурой, состоящей из пары букв, обозначающих код языка.
Атрибут type указывает MIME-тип связанного ресурса.
Атрибут referrerpolicy устанавливает политику HTTP-заголовка — количество информации об исходной странице, с которой осуществлен переход на целевую страницу.
2. Типы ссылок
Атрибут rel определяет, какие типы ссылок создают элементы, устанавливая отношения между связанным ресурсом и текущим документом. Значением атрибута должен быть набор разделенных пробелами ключевых слов. Атрибут не имеет значения по умолчанию.