Кроссбраузерность или смена "шаблона" на

Обсуждение CMS Made Simple в России.

Moderators: iturbay, wdwp

Post Reply
User avatar
Il_Burbero
Forum Members
Forum Members
Posts: 128
Joined: Tue Apr 15, 2008 10:36 am

Кроссбраузерность или смена "шаблона" на

Post by Il_Burbero »

Почему шаблон в кавычках? Потому что это не совсем смена шаблона, а скорее тела ХТМЛ...

Все наверное знают браузер Internet Exlporer (далее Осел) от горячо любимой всеми Майкрософт. Миллионы верстальщиков по всему миру заставляют икать Билли при верстке т.н. кроссбраузерного шаблона ибо для Осла приходится писать либо отдельный стиль-файл либо вштыривать его явой либо грамотно встраивать т.н. хаки.
Нам повезло, у нас есть супер КМС.

Итак проблемы кроссбраузерности или каждому браузеру по шаблону (заодно узнаем что такое ПОльзовательские теги и что из них можно вытянуть.

Создаем пользовательский тег (Расширения->Пользовательские теги) проверки браузера (но он уже по моему есть в пакете)

Code: Select all

echo $_SERVER["HTTP_USER_AGENT"];
Грустное использование, т.к. строка очень большая (http://www.php.su/articles/?cat=vars&page=015) а согласно задаче мы должны выяснить более-менее точное название браузера.
Пошарив в Гуглях модифицируем:

Code: Select all

////////////////////////////////////////////////////////////////
  // Система учёта посещаемости сайта - PowerCounter            //
  // 2003-2004 (C) IT-студия SoftTime (http://www.softtime.ru)  //
  // Симдянов И.В. (simdyanov@softtime.ru)                      //
  // Кузнецов М.В. (kuznetsov@softtime.ru)                      //
  // Голышев С.В. (softtime@softtime.ru)                        //
  ////////////////////////////////////////////////////////////////
  
  // Формируем строчку с ip
  $obtip = 0;
  if($obtip == 0) $ip = $_SERVER['REMOTE_ADDR']; // По умолчанию
  if($obtip == 1) $ip = urldecode(getenv(HTTP_CLIENTIP)); // www.nodex.ru
  // Если подсеть доступна, добавляем её через слеш
  $forward = getenv(HTTP_X_FORWARDED_FOR);
  if (!empty($forward) && ($forward != $_SERVER['REMOTE_ADDR']))  $ip = $ip."/".$forward;
  // Это строчка с реферером - URL страницы, с которой посетитель пришёл на 
  // сайт
  $reff = urldecode($_SERVER["HTTP_REFERER"]);
  // Определяем строку USER_AGENT
  $useragent = $_SERVER['HTTP_USER_AGENT'];
  $browser = 'none';
  // Выясняем браузер
  if(strpos($useragent, "Mozilla") !== false) $browser = 'Mozilla'; //если нижнее не выполнится то останется это
  if(strpos($useragent, "MSIE")    !== false) $browser = 'msie'; 
  if(strpos($useragent, "Opera")   !== false) $browser = 'opera';
  if(strpos($useragent, "Netscape")!== false) $browser = 'netscape';
  if(strpos($useragent, "Firefox") !== false) $browser = 'firefox';
  // Выясняем операционную систему
  $os = 'none';
  if(strpos($useragent, "Win")      !== false) $os = 'windows';
  if(strpos($useragent, "Linux")    !== false 
  || strpos($useragent, "Lynx")     !== false
  || strpos($useragent, "Unix")     !== false) $os = 'unix';
  if(strpos($useragent, "Macintosh")!== false) $os = 'macintosh';
  // Выясняем принадлежность к поисковым роботам
  if(substr($useragent, 0, 12) == "StackRambler") $os = 'robot_rambler';
  if(substr($useragent, 0, 9) == "Googlebot")     $os = 'robot_google';
  if(substr($useragent, 0, 6) == "Yandex")        $os = 'robot_yandex';
  if(substr($useragent, 0, 5) == "Aport")         $os = 'robot_aport';
  $search = 'none';
  // Выясняем принадлежность к поисковым системам
  if(strpos($reff,"yandex"))  $search = 'yandex';
  if(strpos($reff,"rambler")) $search = 'rambler';
  if(strpos($reff,"google"))  $search = 'google';
  if(strpos($reff,"aport"))   $search = 'aport';
  if(strpos($reff,$_SERVER["SERVER_NAME"])) $search = 'own_site';
echo $browser;
Я намеренно не стал удалять "лишний код" т.к. включив мозг и Смарти из него можно вытащить еще кучу нужных вещей (операционка, клиенсткий АйПи, версии ОС и браузеров)
Вызов его соответственно будет {user_agent}, тогда мы можем сделать в шаблоне такую вещь

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{title}</title>
.....
</head>

{if $user_agent == 'msie'}
</__body>
  Привет любителям Ослов!
<__body>
{elseif $user_agent == 'оpera'}
</__body>
  Привет любителям Оперы!
<__body>
{else}
</__body>
  Шифруете своего навигатора? Ну и получите таблички!
<__body>
{/if}
</__html>
Кстати никто не запрещает выводить полностью разные блоки html те полностью от доктайпа и до конца.

Выводы:
Мы можем писать различные хтмл шаблоны валидные и без хаков и оптимальные для браузера пользователя. Например для Осла выводить табличный диз, а для Файрфокса дивовый, для Осла выводить скрипт "прозрачных png" а для файрфокса выводить скрипт Аккордион, выводить упрощенные и оптимальные по разрешению хтмлки для владельцев КПК и т.д. и т.п.

Важные замечания
1. У многих возникнет соблазн накачать поисковики выдачей контента не соответствующего тому что выдается пользователям. Крайне не рекомендуется этого делать. Забанят.
2. Возможно лучше будет выводить различные шаблоны на лету, но я чего то никак не могу найти как менять шаблон по умолчанию на лету.

Буду рад если кому то пригдится сей материал...
Если кто знает скажите как менять дефолтный шаблон на лету???
Last edited by Il_Burbero on Fri May 23, 2008 10:52 am, edited 1 time in total.
ZYV
Language Partners
Language Partners
Posts: 868
Joined: Tue Nov 15, 2005 9:08 pm

Re: Кроссбраузерность или смена "шаблона" н

Post by ZYV »

По поводу (2) посмотри как версия для печати сейчас устроена, м.б. поможет.
unsigned double ZYV;
User avatar
vatokato
Forum Members
Forum Members
Posts: 40
Joined: Mon Dec 24, 2007 10:20 am

Re: Кроссбраузерность или смена "шаблона" н

Post by vatokato »

чет замурыжено черз чур....

отдельный стиль для шестого осла и все)) - вот кроссбраузерность, а лепить тыщу шаблонов это гемор
ZYV
Language Partners
Language Partners
Posts: 868
Joined: Tue Nov 15, 2005 9:08 pm

Re: Кроссбраузерность или смена "шаблона" н

Post by ZYV »

У каждого метода есть свои преимущества и недостатки. Мне обычно хватает нескольких правил в conditional comments в тех случаях, где уж никак не обойти кривую box-модель IE6-.
unsigned double ZYV;
User avatar
Il_Burbero
Forum Members
Forum Members
Posts: 128
Joined: Tue Apr 15, 2008 10:36 am

Re: Кроссбраузерность или смена "шаблона" н

Post by Il_Burbero »

vatokato wrote: чет замурыжено черз чур....

отдельный стиль для шестого осла и все)) - вот кроссбраузерность, а лепить тыщу шаблонов это гемор
Это просто метод вывода разных шаблонов согласно каких то условий. Например можно добавить условие выбора пользователем и позволять ему менять внешний вид сайта т.е. нажал кнопку=сменил шаблон вывода=получил другой дизайн сайта.

Кстати я немного наламерил :)) (говорили же мне постоянно читай документацию ВНИМАТЕЛЬНО, "Переменные Смарти работают только в определнном для них шаблоне", Тег пользователя это кусок исполняемого ПХП кода и не более, т.е. чтобы что то записать надо сказать куда записать, нашару не прокатит).
Итак исправляюсь...
Конец пользовательского (вместо строки echo $browser;) тэга делаем так

Code: Select all

$smarty->assign('browser_info', $browser); //записываем переменные
$smarty->assign('os_info', $os);
$smarty->assign('robot_info', $search);

echo $browser.'|'.$os; //выводим общую строку с данными (необязательно)
Тогда шаблон будет выглядеть так.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{title}</title>
<meta name="browser" content="{user_agent}"  /> <!-- запускаем и исполняем Пользовательский тег, это обязательно, т.к. не запустив скрипт не получишь переменных, соответственно все условия использующие переменные ДОЛЖНЫ СТОЯТЬ после запуска Пользовательского тега-->
{if $browser_info == 'msie'} <!-- можно еще запускать разные скрипты для определенных селекторов, например если Осел то запускать скрипт обработки прозрачности png -->
{literal}
<__script__ type="text/javascript" src="../scripts/fixpng.js"></__script>
{/literal}
{/if}
.....
</head>

{if $browser_info != 'msie'} <!-- После выполнения {user_agent} мы получаем три заполненные переменные Смарти -->
</__body>
  Привет любителям Ослов!
    {if $os='windows'}
      И фанатам Билла Гейтса!
    {/if}
<__body>
{elseif $browser_info == 'оpera'}
</__body>
  Привет любителям Оперы!
<__body>
{else}
</__body>
  Шифруете своего навигатора? Ну и получите таблички!
<__body>
{/if}
</__html>
ZYV
Language Partners
Language Partners
Posts: 868
Joined: Tue Nov 15, 2005 9:08 pm

Re: Кроссбраузерность или смена "шаблона" н

Post by ZYV »

Кстати, как ни странно, это пост мне очень пригодился, когда надо было в течении часов (!) насадить верстку одного чудака на CMSMS, который при этом ухитрился наделать кучу ошибок в самых очевидных местах, используя фишки IE. Переверстывать никакой возможности не было. Оказалось это в такой ситуации - самый простой вариант. Автору спасибо.
unsigned double ZYV;
WiseTroll
Forum Members
Forum Members
Posts: 13
Joined: Sun Jan 27, 2008 11:02 am

Re: Кроссбраузерность или смена "шаблона" н

Post by WiseTroll »

ZYV wrote: У каждого метода есть свои преимущества и недостатки. Мне обычно хватает нескольких правил в conditional comments в тех случаях, где уж никак не обойти кривую box-модель IE6-.
Обычно тоже вполне хватает условных комментариев, но, когда надо в осле что-то центрировать по вертикали на фоне чего-то вытянутого на 100% по той же вертикали  >:(, то иногда просто мечтаешь, чтобы для стилей можно было задавать версии браузеров, для которых они предназначены. Есть расширение на CMSMS Forge для этого, но оно старое. Поэтому в крайнем случае разные версии тех же стилей можно их целиком через комментарии задать, а не только кусками.
ZYV
Language Partners
Language Partners
Posts: 868
Joined: Tue Nov 15, 2005 9:08 pm

Re: Кроссбраузерность или смена "шаблона" н

Post by ZYV »

Тык я через условные комментарии и делаю. Но вот ведь местный гений с доктайпами напутал, а не делать же мне его работу... :(
unsigned double ZYV;
User avatar
Il_Burbero
Forum Members
Forum Members
Posts: 128
Joined: Tue Apr 15, 2008 10:36 am

Re: Кроссбраузерность или смена "шаблона" н

Post by Il_Burbero »

Приятно  ;D что идея все таки имеет место для жизни :) Спасибо!
masterok
Forum Members
Forum Members
Posts: 16
Joined: Wed Oct 29, 2008 9:16 pm

Re: Кроссбраузерность или смена "шаблона" н

Post by masterok »

Я поступил гораздо проще. Нижеследующий код вставляется между и </__body.

Code: Select all

<__script__ type="text/javascript">
ua=navigator.userAgent;
b='</__body class="'; c='">';
if (ua.indexOf('IE 5')!=-1) document.write(b+'ie5'+c);
if (ua.indexOf('IE 6')!=-1) document.write(b+'ie6'+c);
if (ua.indexOf('IE 7')!=-1) document.write(b+'ie7'+c);
if (ua.indexOf('IE 8')!=-1) document.write(b+'ie8'+c);
if (ua.indexOf('Netscape6')!=-1) document.write(b+'moz'+c);
if (ua.indexOf('Gecko')!=-1) document.write(b+'moz'+c);
if (ua.indexOf('Mozilla')!=-1) document.write(b+'moz'+c);
if (ua.indexOf('Firefox')!=-1) document.write(b+'moz'+c);
if (ua.indexOf('Opera')!=-1) document.write(b+'opr'+c);
</__script>
И далее в CSS нужной поправке на браузер присваивается свое значение, например:

Code: Select all


/* для всех браузеров*/
#main {
float: left;
width: 750px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}

/* для Оперы*/
body.opr #main {
width: 749px;
}

/* для одного из IE*/
body.ie7 #main {
width: 760px;
}

/* и так далее по списку...*/
Скрипт меняет класс боди в соответствии с опреленным браузером, а нам остается только присвоить класс в таблице CSS той или иной коррективе стиля. Таким образом я редактирую все в одном листе CSS, буквально для любого браузера. И все рядом, все видно...
Last edited by masterok on Fri Oct 31, 2008 6:48 pm, edited 1 time in total.
ZYV
Language Partners
Language Partners
Posts: 868
Joined: Tue Nov 15, 2005 9:08 pm

Re: Кроссбраузерность или смена "шаблона" н

Post by ZYV »

Ага, а если у пользователя отключен JavaScript или просто него его интерпретатора?
unsigned double ZYV;
masterok
Forum Members
Forum Members
Posts: 16
Joined: Wed Oct 29, 2008 9:16 pm

Re: Кроссбраузерность или смена "шаблона" н

Post by masterok »

ZYV wrote: Ага, а если у пользователя отключен JavaScript или просто него его интерпретатора?
В 99% случаев javascript включен. Кроме того, если выключен javascript, то первым в CSS читается каскад, справедливый для всех пользователей без исключения. Ну, тот что первым и ставится. Так что, никто ничего не теряет, а в 99% случаев Вы получаете кроссбраузерность.
:) :) :)
Post Reply

Return to “Russian - русский”