css

УрокПодключение CSS для отдельных браузеров

Как известно, не все браузеры одинаково воспринимают файлы стилей css. В основном, проблемы возникают со старыми версиями мелкософтовского творения Internet Explorer (7 версия и ниже). Кстати, если проблема возникает в современных браузерах (наподобие Opera, Mozilla Firefox, Chrome), то я настоятельно рекомендую пересмотреть вёрстку страницы.

Так вот. Проблема с браузерами есть. И я знаю как минимум три способа решения этой проблемы.

УрокSEO вёрстка

Немаловажной частью сайта является его "шкурка", шаблон. Внешний вид сайта не должен привлекать посетителей - не существует такого уникального дизайна, который гарантированно всем понравится. Внешний вид не должен отталкивать - с этой задаSeo - немаловажная часть жизни сайта, и о завтрашнем продвижении разработчик должен заботиться уже сегодня, с помощью грамотной верстки. Вообще шаблон сайта может быть рассмотрен с точки зрения seo как элемент внешней оптимизации. И если на этапе разработки программист допустил ошибку, которая будет сказываться на продвижении сайта, то его неминуемо попросят ее исправить. Подробнее про новинки seo можно прочитать на ресурсе seo осень, а мы же займемся программными аспектами.чей может справиться любой трезвый и адекватный дизайнер.

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

Во-первых, самое важное правило, которого всегда надо придерживаться - тэг H1 должен быть на каждой странице сайта ТОЛЬКО один раз. В него можно обернуть название сайта, или его слоган, или заголовок ноды В ПОЛНОЙ СТАТЬЕ (не в анонсе!), или заголовок самой страницы. Но обязательно следите за тем, чтобы этот тэг не повторялся даже дважды.

УрокОтдельный css для последней ноды

Задача такая: есть страница с выводом всех нод. Надо повесить на последнюю ноду дополнительные классы, чтобы можно было повесить только на неё свой css.

Теперь о решении

Вариант номер раз

Говорю сразу - не самый лучший вариант. Зато явно самый простой. Заключается в следующем - просто последнюю ноду отмечать галочкой "Закреплять вверху списков" (Sticky at top of list). Далее в шаблоне ноды node.tpl.php в первой строчке написать:

УрокКнопка разной ширины с закруглёнными уголками

Одна из сложностей, с которой я столкнулся едва начав работать с друпалом - это как сделать все кнопки с закруглёнными уголками, да ещё чтобы ширина у каждой кнопки менялась в зависимости от длины слова(фразы) на ней. Стандартный хтмл друпала не позволяет это сделать, т.к. для моей задачи необходимо обернуть кнопку ещё хотя бы в 1 дополнительный класс. С помощью некоторого кода я всё-таки смог это сделать:

function phptemplate_button($element) {
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }
 
  if (stristr($element['#attributes']['style'], 'display: none;') || 
      stristr($element['#attributes']['class'], 'fivestar-submit')  || 
      is_array($element['#upload_validators'])) {

УрокСпособы закругления уголков. 3 способ

Самый мощный способ загруглять уголки - этот. По крайней мере, на мой взгляд. Можно было бы использовать какие-нибудь скрипты, но если будет отключена поддержка скриптов в браузере (а это процентов 10-15 пользователей), то все ваши углолки окажутся абсолютно не закруглёнными. Поэтому будем работать исключительно с css, который поддерживают все браузеры.

Суть этого метода основывается на кроссбраузерной "тяжёлой артилерии" - position: absolute. Теперь объясняю более подробно:

УрокСпособы закругления уголков. 2 способ.

Предыдущий способ по созданию закругленных уголков хорош всем, кроме двух вещей. Данный метод позволяет справиться только с одной проблемой - большим количеством кода.

Новая задача: сделать блок с закругленными уголками с минимумом html-кода.

Закругляем уголки с помощью :before и :after

Такие элементы, как :before и :after существуют в css начиная с версии 2.0, однако они почему-то мало кому известны.

В общем, лучше на примере. Допустим, у нас есть такой контейнер:

<div class="box">
    Контент
</div>

плюс этого метода в том, что больше HTML не будет! В исходном коде будет записано только это!!

Теперь по css'y:

Задаем требуемый фон для нашего блока:

.box {
    background: #D27B24;
    padding: 15px;
}

УрокСпособы закругления уголков. 1 способ.

Закругленные углы - одна из любимейших "фишек" дизайнеров в современном интернете. Есть множество вариантов их реализации, простых и не очень. Например, такой всем известный браузер FireFox поддерживает специфическое решение: -moz-border-radius. Достаточно указать для контейнера его значение 10px - и углы закруглены! Однако полезность данного метода сомнительна, ибо пригоден он только для FF. Просмотрев эту же страницу в другом браузере, например в Opera, мы увидим что никаких закругленных уголков нет.

Ну а теперь перейдём к более кроссбраузерному решению. Оно действительно самое кроссбраузерное, так как используется только картинка для фона и дополнительные контейнеры.