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

ProgramBox

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

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#javascript #css #seo #accessibility #progressive-enhancement

#javascript #css #seo #Специальные возможности #progressive-улучшение

Вопрос:

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

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

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

1. Вы действительно видите вспышку нестайлингового контента или вы просто предполагаете, что увидите его?

2. Полностью пропустил часть о применении форматирования JavaScript … не делайте этого, это не прогрессивное улучшение. Используйте CSS для оформления, затем добавьте JavaScript для поведения.

3. Ну … и то, и другое. Я действительно вижу это в некоторых случаях, в зависимости от браузера (например, Firefox), содержимого (например, изображений) или когда применяется форматирование (например, document.ready).

4. z-index может быть вашим другом. Присвоите нестайлинговому содержимому z-индекс:0;. Дайте странице нормальный фоновый z-индекс: 1;. Затем, с помощью JavaScript, присвоите содержимому в текущем стиле z-индекс:2;. У меня это сработало, и я не замечаю никаких изменений в рейтинге.

Ответ №1:

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

1. Но как бы вы это сделали, например, для слайд-шоу или слайдера содержимого? Как я уже сказал в своем вопросе, «display: none» не соответствует всем требованиям.

2. Перенесите только одно изображение с исходным ответом. Предоставьте ссылки на следующий и предыдущий слайд. Используйте JavaScript для замены ссылок вызовами XMLHttpRequest.

3. Ну, это на самом деле то, чего я пытаюсь избежать (ср. мою точку зрения о SEO и доступности).

4. Подход, который я описал, особенно выгоден для SEO и доступности: сайт может использоваться без CSS и JavaScript. Клиенты, которые понимают CSS, получают более привлекательную версию. Клиенты, которые понимают JavaScript, получают больше интерактивности. В этом и заключается суть прогрессивного улучшения. Вы можете заменить предыдущие и последующие ссылки любой удобной навигацией, какую пожелаете.

5. Насколько я понимаю, поисковые системы увидят только первое изображение (или первый HTML-контент) слайд-шоу / слайдера. Они не увидят другие слайды, потому что они будут загружены позже через AJAX. В лучшем случае они найдут предыдущий и следующий слайды за навигацией.

Ответ №2:

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

Вы можете косвенно настроить стиль на 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>

1. Мне это нравится! Побочный вопрос: что вы думаете о других методах скрытия, таких как видимость скрытой или с разрешением 9999px влево, вместо отображения none? Или использовать z-index, как предложил Пит Уилсон?

2. Это не имеет никакого значения с точки зрения доступности или SEO. Использование позиционирования или z-индекса обычно используется для решения других проблем с отображением или видимостью, в частности, когда содержимое содержит плагины, которые плохо взаимодействуют со скрытием.

3. @Christophe, @bobince Я думаю, что есть разница в методах скрытия, но это зависит от того, для кого или чего вы оптимизируете. Я действительно не уверен, что это слишком сильно повлияет на SEO, но это действительно зависит от того, что SE встроили в свой алгоритм, однако известно, что display:none amp; visibility hidden может быть не лучшим методом обеспечения доступности для пользователей вспомогательных технологий: для этого я бы предпочел text-indent метод или clip .. дальнейшее чтение с большим количеством ссылок

4. @claresuzy Спасибо за комментарий! Я нашел дополнительную информацию о методе отсечения, это все еще не так просто: yaccessibilityblog.com/library/css-clip-hidden-content.html