Что лучший способ состоит в том, чтобы создать основанный на стандартах, перекрестный браузер совместимые скругленные углы в Drupal?
Я в настоящее время работаю над темой Drupal 6, для которой разработчик явно запрашивает использовать МНОГО скругленных углов.
Я мог, конечно, создать скругленные углы - традиционно - с изображениями. Но я знаю, что должны быть также лучшие и более легкие способы создать скругленные углы.
Оптимально, я хотел бы записать свой CSS как совместимый стандартами CSS3 с селекторами как:
h2 {border-radius: 8px;}
Использованием определенных для браузера является CSS, очень в порядке также, как
h2 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
При необходимости я могу также вставить некоторый пользовательский JavaScript вручную. Я просто не хочу добавлять еще одни 100 изображений скругленного угла к своей разметке.
Какие-либо предложения на лучшем подходе?
2 ответа
Определите класс типа "roundy-corner" и используйте плагин jQuery corner следующим образом:
$('.roundy-corner').corner();
Вам понадобится плагин jQuery roundy corner:
http://www.malsup.com/jquery/corner/
Мне нравится использовать здесь JavaScript, потому что он не требует дополнительной разметки в исходном документе; скрипт будет вставлять элементы-заглушки по мере необходимости. Кроме того, в далеком-далеком будущем, когда у всех нас будут летающие автомобили, а IE будет поддерживать border-radius, вы сможете заменить его чистым CSS.
Некоторые специфические для Drupal заметки для использования предложенного плагина закругленных углов:
- Скачайте jquery.corner.js и поместите его в папку scripts вашей установки Drupal. Убедитесь, что права доступа к файлу установлены правильно.
- Загрузите скрипт в вашу тему (Zen), добавив следующую строку в файл template.php:
drupal_add_js('scripts/jquery.corner.js'); - Присвойте закругленные углы любой части страницы, снова добавив команды стилизации в template.php. Обратите внимание, что их нужно подключить с помощью метода drupal_add_js. Например:
drupal_add_js( "$(document).ready(function() { $('#primary a').corner('top round 4px'); $('.block-inner h2.title').corner('top round 4px'); });", 'inline' );
Вот и все!!! Красивые закругленные углы без изображений!