Заметили ли вы, что, когда EA Games выпускает новое название, они часто одновременно выпускают игру для каждой игровой платформы от PS3 до Nintendo DS?
Есть огромные различия в возможностях этих устройств, и все же они адаптируют игры для каждого из них. Они изменяют визуальный дизайн и игровой процесс, сохраняя при этом основные игровые возможности, темы и брендинг. Они сосредоточены на том, чтобы предоставить каждому покупателю наилучшие впечатления от выбранного игрового устройства.
Я могу связать это с разработкой CSS. Помимо проблем, связанных с поддержкой IE6, мы, похоже, находимся в фантастической ситуации, когда у нас есть полноценная коллекция браузеров с приличным уровнем поддержки CSS2.1: Safari, Firefox, Opera, Chrome и Internet Explorer. Фактически, это первый раз, когда я могу вспомнить, когда доступно 5 браузеров, все со зрелым и совместимым уровнем поддержки CSS.
За последние несколько лет лучшая практика разработки CSS перешла от постепенного ухудшения к прогрессивному улучшению. Воодушевленный прогрессом современных браузеров и упадком старых браузеров, волнение о том, что сейчас возможно, возрастает. Все больше и больше дизайнеров думают, как обеспечить наилучшее взаимодействие с пользователем для каждого браузера, не рискуя совместимостью.
Вот несколько примеров, с которыми я недавно столкнулся:
Медиа-запросы позволяют точно контролировать, как применяются правила CSS на основе функций устройства, на котором отображается ваша веб-страница. Ширина устройства, цвет, разрешение и многое другое можно запросить. Райнхольд Вебер (Reinhold Weber ) продемонстрировал, как комбинация медиазапросов и столбцов CSS3 позволяет оптимизировать работу пользователей Firefox, Safari и Chrome. Техника увеличивает количество текстовых столбцов в зависимости от ширины экрана.
Джонатан Снук (Jonathan Snook ) продемонстрировал трюк с вращением текста, используя расширение преобразования CSS3 в Safari, Chrome и последней версии Firefox. В качестве бонуса он также демонстрирует, что с помощью проприетарного свойства фильтра Microsoft вы также можете поддерживать Internet Explorer.
Тим Браун достигает чистого CSS-градиента текста в Safari, в то время как Маркус Стэндж развлекается с тенями ящиков в своем посте « Веселье с тенями ящиков ». Маркус создает некоторые впечатляющие эффекты для кнопок в Firefox 3.5, а также есть некоторая поддержка теней ящиков в Safari и Chrome.
Я использовал свойство -webkit-box-sizing в своем приложении Adobe AIR , чтобы заставить элемент принимать ширину 100%, исключая при этом ширину его границ и отступов. Обычно границы и отступы увеличивали бы ширину элемента до более чем 100% — часто встречающееся раздражение. Теперь, как объясняет Джеймс Хопкинс, свойство box-sizing имеет широкую поддержку браузера.
Тени CSS для текста , которые всегда поддерживались Chrome (и гораздо дольше Safari [начиная с версии 1.1]), теперь поддерживаются в последних версиях Firefox и Opera. У Westciv есть отличный инструмент для генерации теней CSS, с которым вы можете играть. Вы также можете повеселиться с инструментами генерации градиента CSS , которые в настоящее время поддерживаются Safari и Chrome.
Список можно продолжить: закругленные углы , пользовательские шрифты и цвета RGBA . Это конечно увлекательно!
Но, как бы ни были интересны эти вещи, они все равно должны быть экономически эффективными, чтобы стоить усилий. Так что мне было бы интересно узнать, использует ли кто-нибудь прогрессивное улучшение CSS в своей повседневной работе? Если вы делаете это в работе с клиентами, как вы продаете идею клиентам? Если клиент видит улучшение, продемонстрированное в одном браузере, требуют ли они его во всех браузерах? И если у вас есть живые примеры, дайте нам знать, как вы это сделали.