Реальный мир HTML5 и CSS3 в Internet Explorer 9

Закругленные углы (граница-радиус)

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

  #element {
   радиус границы: 10 пикселей;
 } 

Эта новая функция устраняет необходимость в комплексном решении для сценариев или в большинстве случаев использования изображений в сочетании с границами CSS для создания закругленных углов. С новым добавленным свойством border-radius IE9 Beta позволяет разработчикам создавать и изменять уровень радиуса закругленных углов быстро и с очень небольшим количеством кода. IE9 также поддерживает условные обозначения для граничного радиуса, поэтому каждому отдельному углу может быть присвоена отдельная настройка радиуса, как показано в коде ниже:

  #element {
   border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   граница нижний правый радиус: 15 пикселей;
   граница нижнего левого радиуса: 7 пикселей;
 } 

Медиа-запросы

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

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

Медиа-запросы CSS3, которые теперь поддерживаются в бета-версии IE9, позволяют разработчикам стилизовать страницу на основе ряда факторов, включая ширину, высоту, ориентацию и разрешение. Вот пример CSS, который изменяет ширину элемента в зависимости от размера устройства просмотра:

  @media (min-width: 950px) {
   #element {
     ширина: 600 пикселей;
   }
 }

 @media (минимальная ширина: 450 пикселей) и (максимальная ширина: 950 пикселей) {
   #element {
     ширина: 400 пикселей;
   }
 }

 @media (максимальная ширина: 450 пикселей) {
   #element {
     ширина: 200 пикселей;
   }
 } 

С помощью медиазапросов CSS3 можно легко ориентировать различные устройства и соответствующие им возможности без использования сценариев или серверных решений. Более подробную информацию о медиа-запросах в IE9 Beta можно найти в Руководстве по IE9 Beta для разработчиков .

CSS3 селекторы

Возможность выбора и нацеливания элементов в CSS2.1 довольно обширна, но ограничена в некоторых областях. CSS3 увеличивает количество селекторов CSS, доступных для разработчиков, и IE9 Beta обеспечивает поддержку для многих из них.

Поддержка селектора CSS3 в IE9 Beta включает поддержку структурных псевдоклассов, целевого псевдокласса, псевдоклассов состояний элементов пользовательского интерфейса и псевдокласса отрицания.

Примеры некоторых практических селекторов, предлагаемых в CSS3 и поддерживаемых бета-версией IE9, включают в себя те, которые показаны ниже:

  li: nth-child (4) {
   / * указывает на 4-й элемент списка в каждом неупорядоченном списке * /
 }

 li: last-child {
   / * указывает на последний элемент списка в каждом неупорядоченном списке * /
 }

 li: only-child {
   / * предназначается для элемента списка, если это единственный дочерний элемент * /
 }

 вход: отключен {
   / * предназначается для ввода формы, который отключен * /
 }

 вход: проверено {
   / * предназначается для выбранного элемента формы * /
 } 

Полный список селекторов CSS3, поддерживаемых бета-версией IE9, см. В разделе «Селекторы CSS3» бета-версии IE9 для разработчиков .

Прогрессивное улучшение

Естественно, в реальном мире многие из этих новых функций CSS3 будут видны не всем пользователям. Так что же происходит с этими функциями в браузерах, которые их не поддерживают? В этих браузерах строки CSS, которые они не понимают, будут просто игнорироваться.

Это позволяет разработчикам создавать более простой, менее привлекательный (но приемлемый) интерфейс для старых браузеров, а затем добавлять улучшения CSS3, чтобы улучшить работу пользователей, которые могут видеть новые функции. Решения JavaScript также могут быть предоставлены для поддержки селектора и других функций CSS3, не поддерживаемых старыми браузерами.

Проложить путь к реальному развитию

Microsoft недавно объявила, что IE9 является их самой быстро принятой бета-версией из более чем 10 миллионов загрузок за первые шесть недель. По мере увеличения статистики использования современных браузеров разработчики смогут более комфортно реализовывать эти и другие дальновидные решения HTML5 и CSS3 для решения своих реальных проблем. В конце концов, они смогут создавать поддерживаемые веб-сайты и приложения, которые будут полезны и оптимизированы для производительности.

Выпуск IE9 Beta внес значительный вклад в будущее дизайна и разработки веб-приложений в реальном мире. Чтобы начать разработку проектов с использованием некоторых из этих эффективных решений, загрузите IE9 Beta сегодня.

Думаешь, ты в курсе того, как IE9 реализует HTML5 и CCS3? Проверьте себя, пройдя наш короткий тест .