Можем ли мы использовать селекторы CSS 2.1 на практике? - PullRequest
Новая
       21

Можем ли мы использовать селекторы CSS 2.1 на практике?

0 голосов
/ 28 апреля 2009

Основным виновником этого вопроса является, конечно, IE6, (почти) все согласны с тем, что веб-сайт должен поддерживать IE6, поскольку его используют более 15% посетителей ( для Yahoo это все еще A-Graded браузер ).

IE6 не поддерживает CSS 2.1, поэтому мы можем использовать селекторы CSS 2.1 в наших таблицах стилей? Позвольте мне привести пример: 

<body>
    <div class="header">
    </div>
    <div class="content">
        <h1>Title</h1>
        <p>First paragraph</p>
        <p>Second paragraph</p>
    </div>
    <div class="footer">
    </div>
</body>

Мой CSS может выглядеть так: 

body > div {width: 760px;} /* header content and footer = 760px wide */
h1 + p { margin-top: 5px;} /* the first paragraph after the h1 tag should have a smaller margin */

Но IE6 не поймет этого, так что в любом случае, чтобы быть совместимым с браузером, я должен написать это так: 

.header, .content, .footer  { width:760px; }

И, вероятно, я должен дать первому абзацу какое-нибудь имя класса и определить его таким образом в моем CSS. Я мог бы сделать специфическую IE6 таблицу стилей , которая определяет эти правила, но это кажется удвоением (и все еще не помогает в случае первого абзаца, нуждающегося в имени класса) ...

Ответы [ 7 ]

2 голосов
/ 28 апреля 2009

Если вы серьезно относитесь к поддержке IE6 на 100%, вам следует избегать использования CSS, который не будет работать с ним. Одна из причин использования этих необычных селекторов - сделать вашу жизнь проще, но она не сделает вашу жизнь проще, если вам все равно придется переписать их для IE6. Наконец, такие необычные селекторы как медленнее в Firefox , так что, возможно, просто избегайте их всех вместе.

1 голос
/ 28 апреля 2009

Я думаю, что концепция «поддержки» IE6 - неправильная идея, если мы скажем «нет», мы просто не собираемся позволить пользователям IE6 доступ к нашему сайту и контенту? Конечно, нет. Таким образом, вопрос заключается в том, сколько времени вы хотите потратить на то, чтобы работа вашего сайта была такой же для IE6, как и для других браузеров.

Моя собственная точка зрения состоит в том, что я «поддерживаю» IE6, так как пользователь IE6 сможет получить доступ ко всему контенту сайта и всем его функциям, но он может не получить такой же визуальный или интерактивный опыт, как пользователь Firefox 3. .

Итак, чтобы ответить на ваш вопрос, да, мы можем использовать селекторы CSS 2.1 и 3.0 для достижения определенных эффектов, если контент все еще существует для IE6 и имеет приемлемый внешний вид. Что приемлемо, будет зависеть от проекта (и, скорее всего, от клиента!).

Ваш пример был хорошей демонстрацией этого: 

p { margin-top: 10px; }
h1 + p { margin-top: 5px;} /* the first paragraph after the h1 tag should have a smaller margin

Здесь IE6 по-прежнему будет получать содержимое абзаца, и между ними по-прежнему будут все важные пробелы, они просто не получат уменьшенный интервал в первом. Это справедливый компромисс IMO для уменьшения помех в вашем HTML.

Еще один хороший пример - закругленные углы. Вы можете использовать -moz-border-radius и -webkit-border-radius, чтобы получить закругленные углы в Firefox и Safari, улучшая визуальное восприятие вашего сайта, но пользователи IE по-прежнему получают контент, хотя и с простыми старыми квадратными углами (а затем есть множество JavaScript-решений чтобы достичь этого для людей с включенным JavaScript).

Все это подпадает под заголовок Прогрессивное улучшение

1 голос
/ 28 апреля 2009

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

0 голосов
/ 28 апреля 2009

Для каждого пользователя IE6 на моем сайте я получил большое красное предупреждение о том, что их браузер старый, и они должны загрузить настоящий браузер, такой как Firefox;] Это решение. Если веб-мастера не скажут это пользователям, кто будет?

0 голосов
/ 28 апреля 2009

Решать, игнорировать ли IE6, должен не разработчик, а владелец сайта. Вы должны предоставить владельцу сайта статистику по этому конкретному сайту, и тогда решение будет принято.

Если вы или владелец решили НЕ пожертвовать людьми из IE6, то нет смысла использовать эти необычные селекторы. Есть большой недостаток и пока еще нет.

0 голосов
/ 28 апреля 2009

Ваша браузерная аудитория будет диктовать то, что вы поддерживаете, как вы уже заявили, даже «хитрый» веб-сайт, такой как w3schools, все еще сообщает о доле рынка IE6 на уровне 17% в марте.

Тем не менее, если вы собираетесь поддержать это, очевидно, вам нужны альтернативы.

Я прочитал еще одну интересную тему о нацеливании вчерашнего IE8 на stackoverflow , и я подозреваю, что поддержка каждого браузера будет проще, если вы сможете настроить их таргетинг. Я нахожусь в среде .net и использую подход, который кто-то опубликовал примерно в середине этого потока, чтобы мои CSS-селекторы могли очень легко стать: 

body > div {width: 760px;}
.IE6 div.header, .IE6 div.content, .IE6 div.footer { width: 760px; }

Очевидно, вы найдете свой собственный способ нацеливания на браузеры, но CSS будет равносильно чему-то похожему.

0 голосов
/ 28 апреля 2009
  • Javascript как JQuery.
  • CSS Hack. Но я не предлагаю этого. Потому что это не стандарт W3C.
  • CSS Classname. При использовании CSS Classname заменяет CSS Selector.
...