CSS 3: шаг вперёд или бег на месте?

02.08.2012

Освежая в памяти таблицы стилей, я вышел на сайт css3test.com , который тестирует браузеры на предмет поддержки CSS 3. Сервис показался мне интересным, так как тратить время на изучение CSS3 не особенно хотелось, вспоминая то, сколько времени было убито на поиски косяков и багов в CSS2, чтобы шаблон дизайна хорошо выглядел хотя бы в основных браузерах.

Загружаю тест и проверяю свои браузеры:

Наблюдая эту ”многообещающую и перспективную” статистику невольно задаёшься вопросом, а оно того стоит? Я решил не гнаться за инновациями и остановился на CSS 2, полагая, что последние версии браузеров в состоянии вразумительно отработать эту технологию.

Сложность разметки состояла в том, что необходимо было совместить жесткую и резиновую верстку вложенных блоков и элементов форм.

За день разметка для FireFox была готова, но пришлось убить ещё три дня на то, чтобы всё отображалось адекватно в 4-х оставшихся браузерах. Когда настал момент наполнить шаблон информацией, то всё пришлось начинать с начала, потому что в одном браузере разметка уехала из-за порядка следования тэгов HTML, другому браузеру не понравилась таблица внутри слоя, третий вообще не увидел элементы формы в слое и т.п. и т.д. Вместо того, чтобы заняться делом, я тратил время на адаптацию кода ко всем пяти браузерам, думая о том, как бы исхитриться и заставить работать стили. Вес шаблона уменьшился почти в два раза, но возник вопрос, а как это всё будет выглядеть в других не столь популярных 20-ти браузерах? Поэтому я бросил это глупое и пустое занятие и переделал в стилях только половину кода, оставив на ключевых позициях таблицы, работа которых вселяла оптимизм и безоблачную поддержку кода на будущее.

Простую разметку можно легко выполнить без таблиц, а над сложной разметкой придётся прилично попотеть. Доходит до того, что на форумах народ пытается объявлять какие-то дикие заголовки, чтобы хотя бы как-то завести CSS, а процентов 50% примеров не рботают то в одном, то в другом браузере и приходится самому неслабо включать голову, а во многих случаях и методом тыка оживлять CSS. Это первая проблема. Вторая проблема заключается в том, что сложную CSS-разметку намного сложнее расширять. Если HTML-таблицы можно без проблем вкладывать друг в друга, объединять ячейки и т.п., то вложение в слои новых объектов или изменение параметров слоёв может существенно повлиять на результат. Даже такое простое действие как выравнивание по вертикали объекта в слое может вызвать определенные сложности. А между тем хочу напомнить, что рекомендация W3C по CSS 2 была принята ещё в 1998 году.

Сейчас идёт работа над CSS 3 и даже CSS 4, но позвольте, а когда базовые функции CSS будут адекватно работать? Это, конечно, прекрасно, что при помощи CSS 3 можно выполнять анимацию блоков, создавать градиенты, закруглённые углы, тени и т.п., но не пора ли начать строить дом с фундамента , а не с крыши? Не пора ли на деле осуществить стандартизацию, пока всё вконец не разъехалось далеко и надолго?

За что заказчик платить web-разработчику? За создание и наполнение информационного ресурса или за то, чтобы в 20-ти браузерах разметка смотрелась адекватно? Понятно, что WEB - это бизнес и каждый производитель браузера считает себя самым продвинутым разработчиком, но, друзья, если несколько компаний не в состоянии договориться, то что дальше-то будем делать? Продолжать страдать?

Для наглядности открываем страницу новых тестов и видим, первое - IE 10 круче всех, что не удивительно, второе - более или мене поддерживаются только три технологии - никому неизвестный SVG, объектная модель DOM и Javascript, которые и 10 лет назад работали неплохо. Примерно всё то же самое имеет место быть и в целом. Нормально! ”Наш паровоз, вперед лети. В Коммуне остановка”. Выходом из этой ситуации, на мой взгляд, может стать создание некоторого справочника по каждой технологии, в котором будут описаны только те положения стандарта, которые реально работают в нескольких основных браузерах. Пусть это будет 30-40% от всех реализованных идей, но это будут 30-40% рабочих механизмов без всяких плясок и фокусов. Сейчас подача информации осуществляется таким образом: даётся объект, метод, свойство и т.д., а отдельной строкой отмечаются браузеры, в которых это работает или не работает. Но разработчику кросс-браузерных ресурсов, в отличие от разработчика Интранет-приложений, не интересно знать, что чего поддерживает. Ему интересно знать лишь то, что железно работает в нескольких основных браузерах.

А можно ли поступить проще и разрабатывать сайты под один-два основных браузера? Несколько лет назад был браузер IE 4 и все остальные. Тогда можно было пренебречь 10-15% пользователей и разрабатывать сайты под IE 4. Сейчас картинка изменилась. Пока в Microsoft шаманили новые версии, полагая, что большинство пользователей будут пользоваться тем, что есть под рукой, отечественный рынок проникся более интересными предложениями - Chrome, FireFox и Opera, из-за чего возникла необходимость разработки сайтов под эти три +IE браузеры.

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