Скругление углов, тени и прочие изыски в IE9 на Blogger

CSS3 in IE9 for BloggerМногие из моих читателей, использующих Internet Explorer, полагаю, заметили, что некоторые варианты оформления, описанные в моих статьях, имеют скругленные уголки, тени, свечение и кое-какие другие графические изыски. Тем не менее, при переносе в свои блоги кода, описывающего эти элементы, они всех этих красивостей не наблюдали. И это при том, что большинство использует IE9, который, вроде как, поддерживает подобное.

Думаете, в этом виноват я? Ошибаетесь. IE9? Снова нет. Полагаете, что вы где-то напортачили сами? Самокритичность - штука хорошая, но ответ снова неверный. Виноваты разработчики Blogger, намеренно занижающие планку стандартов спецификации Internet Explorer!

Чтобы не быть голословным, предлагаю провести простейший тест, не требующий внесения в код каких бы то ни было правок: запустите Internet Explorer девятой версии и откройте в нем какую-нибудь из страниц своего блога, на которой присутствуют элементы, которые по идее должны отображаться с тенями или скругленными уголками, но почему-то не отображаются. Сделали? Теперь нажмите на клавиатуре клавишу F12 - в нижней части окна Internet Explorer у вас откроется вкладка механизма отладки IE. Взгляните на верхнюю строку меню этой вкладки. Последний ее пункт называется "Режим документов" и задан он у вас как "стандартный IE7". Что ж, нажмите на него и в выпадающем меню выберите "Стандарты Internet Explorer 9". Дождитесь, пока ваша страница перезагрузится и вуаля - скругленные углы, тени и прочие прелести CSS3 у вас перед глазами!

Демонстрация возможностей CSS3 на IE9

Но как же добиться этого без использования механизма отладки? Как сделать так, чтобы всю эту красоту могли наблюдать не только вы, но и ваши читатели, использующие IE9 для интернет-серфинга? Решение довольно простое и банальное: необходимо немного видоизменить один из meta-тэгов.

Откройте редактор шаблона (Дизайн->Изменить HTML), найдите после открывающего тэга <head> следующую строку:
<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
...и видоизмените ее следующим образом:
<head>
  <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
Как видите, все оказалось проще некуда!
1. После внесения изменений обязательно просмотрите дизайн вашего блога на предмет возникновения различных смещений и перекосов в IE9. Увы, но подобное изредка происходит. И разбираться с проблемами, поскольку они сугубо индивидуальны, вам придется самостоятельно.

2. Данный метод добавит отображение скругленных уголков, теней и пр. только в Internet Explorer 9. Для младших версий этого браузера ничего в этом плане не изменится. В работу прочих браузеров данный метод, также, не вносит никаких изменений.

Немножечко информации для особо пытливых: если вы внимательно приглядывались к разным шаблонам, то наверняка заметили, что в некоторых из них попадаются элементы со скругленными углами, которые корректно отображаются в IE9, несмотря на наличие параметра "IE=EmulateIE7" и, даже, на более младших версиях IE. При этом, на добавляемые вами элементы интерфейса эта сказка, увы не распространяется...

Скругление углов в шаблонах Blogger

Связано это с тем, что разработчики немного схитрили. В браузерах (отличных от IE), где скругление уголков поддерживается, используется стандартное CSS-свойство border-radius и его аналоги. А вот при отображении шаблона в IE, срабатывает скрипт, который рисует скругленные уголки за счет вложенных тэгов <div>. Увы, этот метод разработчики посчитали нужным применять только к своим элементам оформления (привязка идет к конкретным классам). Все, что вы добавляете самостоятельно, подчиняется общим правилам режима совместимости с IE7, которые распространяются на все прочие элементы шаблона.

Комментариев: 10

  1. спасибо!
    Попала сюда через поиск по другому вопросу, а оказалось что статья пришлась как раз по делу, моя проблема была в отображении стандартов IE.

    ОтветитьУдалить
    Ответы
    1. Отрадно слышать, что мой материал пригодился :-)

      Удалить
    2. Спасибо вам за этот пост,мне он очень помог для IE,а вот в Opera такая же проблема,подскажите пожл как ее решить.Может тоже какой то meta-тэг вставить в шаблон,у меня получается что в Opera весь сайдбар идет после постов,я уже браузер обновлял не помогло.Заранее спасибо!
      P.S.:К стати шаблон у меня не классический,но работает во всех браузерах норм только вот в Opera тормозит.

      Удалить
    3. Какая версия Opera? Какие CSS-свойства используются?
      И, вообще, при чем здесь сайдбар?!

      Удалить
  2. По другим IE так и не понятно, что делать...

    ОтветитьУдалить
    Ответы
    1. Вы имеете в виду как реализовать скругления и пр. на более ранних версиях IE? Об этом я писал в конце статьи Как красиво выделить текст статьи в блоге .

      Удалить
  3. Спасибо, это оказалось лучшим решением проблемы с ИЕ, которое я увидел на просторах И-нета. А пользователи с более старыми версиями ИЕ пускай обновляются.

    ОтветитьУдалить
  4. Спасибо,
    content='IE=edge' как раз то, что решило проблему.

    ОтветитьУдалить
  5. Спасибо автору!!

    ОтветитьУдалить

Хотите подписать свой комментарий, но у вас нет аккаунта? Выберите в выпадающем списке Имя/URL.
Вы сможете вписать свои имя или ник. Поле для указания URL можно оставить пустым.

Тэги, допустимые в комментариях