Я пытаюсь использовать мобильный подход к дизайну сайта. В рамках этого я использую медиа-запрос для определения ширины экрана более 768 пикселей.

@media only screen and (min-width: 768px)

Это вызывает загрузку изображения через CSS.

h1:before{content: url(../static/logo.png)" ";}

Теперь, когда это изображение загружается, я также хотел бы сделать его гиперссылкой. Поскольку я уже использую jquery в другом месте, я думаю, что проще всего было бы выбрать изображение в DOM и добавить элемент гиперссылки к объекту. Однако мне кажется, что изображение не отображается в DOM, потому что я использую CSS для загрузки изображения (я не уверен, имеет ли значение тот факт, что это псевдоэлемент).

Какова эффективная стратегия загрузки объектов (изображений) и применения к ним разметки в стратегии, ориентированной на мобильные устройства? Спасибо!

2
Evan 26 Авг 2011 в 01:03

2 ответа

Лучший ответ

Просто используйте jQuery, чтобы вставить изображение и ссылку в DOM.

if ($(window).width() > 768) {
    $('h1').before('<a href="#"><img src="images/logo.jpg" /></a>');
}
4
Rusty Jeans 25 Авг 2011 в 21:45

Вы не можете выбирать или управлять псевдо элементами, добавленными с помощью :before или :after. Их просто нет в DOM. Из спецификации Создаваемый контент :

Созданный контент не изменяет дерево документа. В частности, он не возвращается обратно в процессор языка документа (например, для повторного анализа).

См. этот пример на jsFiddle.



Использование jQuery для добавления изображения и ссылки - как в ответе Rusty Jeans - это хороший способ.

Если вас беспокоит изменение размеров, самое большее, что вам может предложить подход CSS, - это то, что изображение будет отображаться / скрываться, даже если JS был отключен. Чтобы "связать" его, вам нужно будет отслеживать событие resize, независимо от того. (Если по какой-то причине изменение размера действительно является такой большой проблемой.)

Если бы это был я, я бы использовал настоящий HTML - изображение с предварительной ссылкой - вместо псевдоэлементов. Используйте CSS, управляемый медиа-запросами, чтобы полностью показать или скрыть эти узлы (display:none и т. Д.).

Другой подход - добавить изображение через CSS, чтобы браузеры с отключенным JS работали как-то по-своему. НО , затем используйте JS, чтобы удалить этот псевдоэлемент CSS и вместо этого добавить реальный элемент со ссылкой. То есть подход «прогрессивного улучшения».



Контент :before и :after предназначен для презентационных целей, а не для структурных, функциональных элементов.

1
Brock Adams 26 Авг 2011 в 02:47