lightanddesign.ru
You might also like
В спецификации HTML существуют различные запреты. Достоверность многих из них вызывает сомнения. Один из самых распространенных примеров, который я вижу, — это вложенные ссылки.
Спецификация явно запрещает встраивать одну ссылку в другую.
Ключи.
…
Модель содержимого: прозрачная, но не должно быть детского интерактивного содержимого.
Если вы сделаете это, парсер браузера неправильно поймет вас и закроет родительскую ссылку, предшествующую ей, как только встретит начальный тег вложенной ссылки.
Вот как это выглядит с точки зрения браузера.
Однако существуют сценарии, когда вы хотите проигнорировать запрет и поместить одну ссылку на другую.
Итак, еще раз, в контексте задачи, я оказываюсь в этой ситуации. В прошлом я находил способы обойти это и использовал множество вариаций. Они включают эмуляцию внутренних ссылок в JS (например, через простой onclick) и размещение одной из ссылок вокруг родительского контейнера (например, см. решение Гарри Робертса), но все эти варианты являются очевидными костылями Используя их, вы либо теряете всю естественность обычного связывания, либо ограничиваете количество сценариев, в которых эти переопределения могут работать.
Рассмотрев все варианты, я понял, что для моих нужд подойдет только полная эмуляция в JS. Чистый CSS не смог достичь того, что мне было нужно. Однако все мы знаем, что подражание родным элементам в JS — одна из самых приятных задач. Поэтому он решил еще немного поэкспериментировать.
И — он нашел решение. В данном случае это чисто HTML-решение, и вы можете встраивать между ними любое количество собственных ссылок.
Р ешение
Все, что вам нужно сделать в итоге, это поместить объект между внутренней и внешней ссылками. Внезапно это сработало. Все современные парсеры браузеров перестают взрывать разметку и начинают обрабатывать вложенные теги по своему усмотрению. Да, теперь вы можете использовать объект как объект разметки.
П очему это работает
Что, в теории, представляют собой объекты? Они представляют собой некую внешнюю сущность, тип которой задается атрибутом type, а содержание/ссылка на объект — атрибутом data. Содержимое между начальным и конечным тегами объекта — это фактически заполнитель, который должен быть отображен, если браузер по какой-то причине не может отобразить соответствующее содержимое. Например, если определенное дополнение не установлено в браузере.
Если в атрибуте type ввести неизвестный тип MIME, браузер немедленно переключится на представление популярной книги. Однако это делается без указания атрибута ‘required’.
Поэтому, обернув HTML, который вообще не содержит атрибутов, вы получаете простой элемент обертки, содержащий содержимое. Однако обертка обладает весьма необычными свойствами. Все содержимое правильно распознается синтаксическим анализатором, независимо от контекста объекта. Это свойство можно использовать для встраивания ссылки в другую ссылку.
Я думаю, что поведение этого объекта связано с тем, что эти форкбэки в основном используются для отображения ссылок типа "Я не установил потрясающий плагин, просто скачайте его". объекты любого рода (например, флеш-ролики). Тем не менее, многие разработчики определенно хотели использовать объекты в качестве обычного контента. Другими словами, они хотели встраивать ссылки, абзацы, заголовки и т.д. куда угодно. Поэтому браузеры должны были иметь возможность повторно подтверждать и внедрять все в объект. Это гарантировало, что автор ничего не нарушил, когда браузер скопировал откуда-то объектный код и вставил его в содержимое страницы.
П оддержка браузерами
Некоторые браузеры не сразу отображали такое поведение.
Internet Explorer поддерживает вложенные объекты только с версии 9.
Firefox, начиная с версии 4 и выше.
Opera — по крайней мере, версия 9 (возможно, более ранняя — дальше я не заходил).
Вебкиты — все проверил, Safari — точно с 5.1, Chrome — с 14, дальше не пошел.
Очевидно, что в большинстве случаев поддерживаются только старые версии IE. Все остальные браузеры хорошо обновлены, поэтому любая версия, имеющая проблемы с этим трюком, исчезнет из всех списков совместимости.
ИП Фольбек.
К сожалению, мы не знаем простого способа обойти эту проблему в старых версиях IE. Вы можете хотя бы попытаться исправить ситуацию, чтобы ничего не взорвалось — например, обернуть теги внутренних ссылок в условные комментарии.
Если такая потеря функциональности полезна — замечательно. Если нет, вам нужно использовать другие ошибки в условных комментариях к этому вопросу.
Э то валидно?
Вовсе нет. Недействительно, потому что объект не имеет атрибутов, требуемых спецификацией. Если вы указываете допустимый тип mime, например type = "owo / uwu", то сам объект допустим, но как только вы устанавливаете на него ссылку, валидатор жалуется на его вложенность.
Очевидно, что валидатор не является показателем чего-либо, кроме стандартного соответствия кода спецификации. В этом случае использование ссылки внутри объекта самой ссылки может быть полностью оправдано (например, "загрузка плагина") и поэтому не приводит к ошибке валидации.
Кроме того, неизвестно, почему встраивание ссылок в другие ссылки не должно быть разрешено по умолчанию. Нет никаких причин, почему это должно быть разрешено. Однако существует слишком много сценариев, в которых такое поведение абсолютно необходимо.
П римеры использования
Сначала мы хотели подробно описать все возможные сценарии, в которых можно или нужно использовать вложенные ссылки, например, на примерах из реальной жизни. Но потом я понял, что эти примеры никого не убедят. Тех, кому нужна эта функция, удовлетворит первый практический пример, приведенный выше, а остальных не убедит ничто, кроме собственного опыта. Кроме того, разработка очень большого количества примеров требует больших затрат. Вот как я перечисляю их в сухом виде:.
Фрагменты статей. Сниппеты, содержащие первые несколько предложений, могут содержать ссылки, которые не стоит вырезать при создании сниппета.
Сноски и вложенные термины, которые могут заканчиваться ссылками.
Сложные интерфейсы с вложенными сущностями, которые могут быть представлены в виде связей. Сюда относятся твиты в интерфейсе Twitter, которые ссылаются на расширенную страницу твита и содержат другие ссылки на пользователей или внешние страницы. Это относится к интерфейсам электронной почты, где фрагмент письма, являющийся ссылкой на письмо, может содержать другие ссылки на темы, вложения, теги и т.д.
Наконец, стоит сказать, что этот трюк может быть использован с любым содержимым, которое вы хотите использовать, если это явно не разрешено в спецификации.
Например, не так давно можно было использовать детали и формы элементов. Однако подумайте вот о чем. Согласно спецификации, они могут существовать только внутри блочных фреймов. Невозможно создавать иллюстрации с подписями, связанные с определенными словами в абзаце, или создавать подробные описания слов или предложений (например, в случае со сносками, какой тег вы бы выбрали для сноски в абзаце).
Трик решает все эти проблемы для меня. Вопрос лишь в том, оправдано ли его использование. Лично я считаю многие запреты в спецификации бессмысленными, а возможность обойти их с помощью логических аргументов — бесценной.
U pdate from 2015-03-05
Владимир Родькин обнаружил, что дополнение Flashblock для Firefox удаляет "битые объекты" со страниц и считает их нефункциональными. Добавление mime-типа неизвестной природы, например, type = "owo / uwu", решает эту проблему, и FF начинает принимать объекты правильно.
