Чистое прогрессивное улучшение

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

Мое беспокойство: как я могу избежать вспышки неформатированного контента, когда неупорядоченные списки видны до применения форматирования? Существуют ли лучшие практики для этого?

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


javascript css seo accessibility progressive-enhancement
person Christophe    schedule 11.06.2011    source источник
comment
Вы на самом деле видите вспышку нестилизованного контента или просто предполагаете, что увидите его?   -  person Matijs    schedule 11.06.2011
comment
Полностью упустил немного о том, что JavaScript применяет форматирование… не делайте этого, это не прогрессивное улучшение. Используйте CSS для стилизации, затем добавьте JavaScript для поведения.   -  person Matijs    schedule 11.06.2011
comment
Ну... оба. Я действительно вижу это в некоторых случаях, в зависимости от браузера (например, Firefox), содержимого (например, изображений) или применения форматирования (например, document.ready).   -  person Christophe    schedule 11.06.2011
comment
z-index может быть вашим другом. Дайте нестилизованному содержимому z-index:0;. Дайте странице обычный фон z-index:1;. Затем с помощью JavaScript задайте контенту в стиле z-index:2;. Это сработало для меня, и я не замечаю никаких изменений в ранге.   -  person Pete Wilson    schedule 11.06.2011

Ответы (2)


arrow_upward
1
arrow_downward

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

Вы можете косвенно заставить стиль установить значение display: none, когда вы обнаружите, что JavaScript доступен с помощью CSS, и какой-либо скрипт запускается до того, как какой-либо контент будет включен:

<head>
    <style type="text/css">
        body.withjs #menu { display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.body.className= 'withjs';
        window.onload= function() {
            ...do stuff with menu...
            document.getElementById('menu').style.display= 'block';
        };
    </script>
    ...
    <ul id="menu">
        ...
    </ul>
</body>
person bobince    schedule 11.06.2011
comment
Мне нравится это! Дополнительный вопрос: что вы думаете о других методах скрытия, таких как видимость скрыта или слева -9999 пикселей, вместо того, чтобы отображать ничего? Или использовать z-index, как предложил Пит Уилсон? - person Christophe; 12.06.2011
comment
Это не имеет никакого значения с точки зрения доступности или SEO. Использование позиционирования или z-индекса обычно используется для решения других проблем с отображением или видимостью, в частности, когда контент содержит плагины, которые плохо взаимодействуют со скрытием. - person bobince; 12.06.2011
comment
@Christophe, @bobince Я думаю, что есть разница в методах скрытия, но это зависит от того, для кого или для чего вы оптимизируете. Я действительно не уверен, что это слишком сильно повлияет на SEO, но это действительно зависит от того, что SE встраивает в свой алгоритм, однако известно, что display:none и visibility hidden могут быть не лучшим методом доступности для пользователей вспомогательных технологий: для этого я d предпочитаю метод text-indent или clip.. дальнейшее чтение с дополнительными ссылками - person clairesuzy; 13.06.2011
comment
@clairesuzy Спасибо за комментарий! Я нашел дополнительную информацию о методе отсечения, это все еще не так просто: yaccessibilityblog.com /library/css-clip-hidden-content.html - person Christophe; 14.06.2011

arrow_upward
2
arrow_downward

Используйте CSS для форматирования вместо JavaScript.

person Oswald    schedule 11.06.2011
comment
Но как бы вы это сделали, например, для слайд-шоу или слайдера контента? Как я уже сказал в своем вопросе, display:none не отвечает всем требованиям. - person Christophe; 11.06.2011
comment
Передавайте только одно изображение с исходным ответом. Укажите ссылки на следующий и предыдущий слайд. Используйте JavaScript для замены ссылок вызовами XmlHttpRequest. - person Oswald; 11.06.2011
comment
На самом деле, это то, чего я стараюсь избегать (см. мое замечание о SEO и доступности). - person Christophe; 11.06.2011
comment
В особенности SEO и доступность выигрывают от подхода, который я описал: сайт можно использовать без CSS и JavaScript. Клиенты, понимающие CSS, получают более качественную версию. Клиенты, которые понимают JavaScript, получают больше интерактивности. Вот что такое Progressive Enhancement. Вы можете заменить предыдущие и следующие ссылки любой причудливой навигацией по вашему желанию. - person Oswald; 11.06.2011
comment
Насколько я понимаю, поисковые системы будут видеть только первое изображение (или первый HTML-контент) слайд-шоу/слайдера. Другие слайды они не увидят, потому что они будут загружены позже через AJAX. В лучшем случае они найдут предыдущий и следующий слайды за навигацией. - person Christophe; 12.06.2011
comment
Такой плохой ответ отношения сигнал-шум. По крайней мере, предоставьте некоторую контекстно-зависимую информацию вместо того, чтобы стрелять общими истинами с бедра. Сценарий, описанный в OP, четко указывает на необходимость, когда форматирование зависит от поведения, поэтому Javascript играет важную роль во влиянии на то, какое форматирование применяется. На плакате также было ясно сказано, что он уже понял такие основы, так что не надо банальностей. - person Tommi Forsström; 08.05.2013