CSS – как же надоела эта кроссбраузерность

25 Дек
2011

Не для кого ни секрет, что сложная политическая обстановка в сфере браузеров заставляет потеть многих верстальщиков и js-программистов, заставляя придумывать различные уловки с целью обеспечения, хотя бы примерного, сходства их сайтов в различных браузерах.

Для этого используются разные приемы:
  • Дублирование кучи правил для различных браузеров.
  • Передача этой же задачи на клиентские библиотеки (CSS3 Pie)

Это рабский труд или самого верстальшика или машины клиента.

История

-«Ты повторяешь одни и те же данные в разных формах. Ты пишешь одни и те же куски кода сотню раз. Тебе не надоело повторяться каждый день? Ты не ценишь свое время? А память твоя не захламилась ли отходами от выискиваний новых свойств для браузеров?»- Послышался глас из неба.
— «А как же мне избежать этого, если старшие братья, разрабатывающие браузеры, разрабатывающие серверные Фреймворки, не думают о делах верстальщиков?»
— «Генерируй….»

Проблемы

Итак, перед собой при верстке я вижу две основные проблемы, которые почему-то не решают та часть, которая должна это решать (серверная):
1. При реализации методов, которые по разному «обзываются» в разных браузерах, я должен повторять кучу различны префиксов, а то и вообще, других команд.
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */

в место border-radius:10px;
или
 background: -moz-linear-gradient(top,#ccc,#fff);
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#cccccc,endColorstr=#ffffff,GradientType=0); zoom: 1;
background: linear-gradient(top,#ccc,#fff);

и еще куча «извращений» из топика Delka в место background: linear-gradient(top,#ccc,#fff);
2. Вторая проблема связанна с тем что, эти и многие другие особенности нужно помнить, и знать где скопипастить. А если интернета под рукой нет, то откладывать эту задачу или рыскать по дальним закоулкам памяти, тратя свое время.

CssEasyCrossBrowser

Вот и поэтому я решил упростить себе жизнь, используя предварительную обработку на сервере, и написал модуль для Zend Framework.
Модуль состоит из одного контроллера IndexController, который запрашивает у модели у модели нужный файл и выдает его клиенту с заголовком ‘Content-type:text/css’.
И одной модели, в которой и реализована основная логика.

Необходимый клиенту файл ищется в папке data.
В папке crossBrowser хранятся регулярные выражения для замены.
На данном этапе реализовано только простая подстановка css свойств по регулярному выражению “/$fileName:(.*);/”. Такая организация правил добавляет гибкость в состав модуля, правила можно добавлять, изменять, или удалять независимо от исходного кода модуля.

Так же реализована настройка в application.ini путей до папок с файлами css, и папок с файлами правил (я их пока жестко сделал в формате tсss)
Если не устраивают настройки по умолчанию, то необходимо подключить ресурс и изменить параметры
pluginPaths.cssEasyCrossBrowser_Resource= path/to/modules/cssEasyCrossBrowser/Resource
resources.cssEasyCrossBrowser.cssDataPath=path/to/cssFiles
resources.cssEasyCrossBrowser.cssСrossPath=path/to/cssRules


а если устраивают хотя бы объявить его:
pluginPaths.cssEasyCrossBrowser_Resource= path/to/modules/cssEasyCrossBrowser/Resource
resources.cssEasyCrossBrowser.instance=”Be happy”

настройка маршрута для примера:
 $cssRouteConfs = array(
'module' => 'cssEasyCrossBrowser',
'controller' => 'index',
'action' => 'index',
);
$cssRouteReq = array('cssFile' => '[a-zA-Z]{1,}\.css');
$cssRoute = new Zend_Controller_Router_Route('css/:cssFile', $cssRouteConfs, $cssRouteReq);
/* @var $router Zend_Controller_Router_Rewrite */
$router = Zend_Controller_Front::getInstance()->getRouter();
$router->addRoute("css", $cssRoute);


Сам модуль на GitHub. Документация будет на днях, простите, но у меня уже глубокий вечер.
Планируемое развитие
1. Константы
2. Сложные css- правила.
3. Build, и кеширование. ( Так как модуль ориентирован на development, то имеет смысл или production кешировать результаты, или же делать предварительную сборку всех css (что бы ни таскать за собой модуль))
4. Минимизация удалением лишнего (типа лишних переносов, пробелов, комментов), удаление дублей.
Я написал это пост с целью привлечения сообщества не к моему продукту, а к реализации общего репозитория решений кроссбраузерной верстки, ни я, ни ты %USER_NAME% поодиночке не сможем выжить в войне браузеров.

Я написал это пост с целью привлечения сообщества не к моему продукту, а к реализации общего репозитория решений кроссбраузерной верстки, ни я, ни ты %USER_NAME% поодиночке не сможем выжить в войне браузеров.

P.S С наступающим блог
По материалам Хабрахабр.



загрузка...

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

Наверх