10 января 2008 ~ 3791 Комментарий

Css-хак под любой браузер — легко!

Дизайн

css

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

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

Смотрим код:

<script type="text/javascript">
  var cssFix = function(){
  var u = navigator.userAgent.toLowerCase(),
  addClass = function(el,val){
    if(!el.className) {
      el.className = val;
    } else {
      var newCl = el.className;
      newCl+=(" "+val);
      el.className = newCl;
    }
  },
  is = function(t){return (u.indexOf(t)!=-1)};
  addClass(document.getElementsByTagName('html')[0],[
    (!(/opera|webtv/i.test(u))&&/msie (\d)/.test(u))?('ie ie'+RegExp.$1)
      :is('firefox/2')?'gecko ff2'
      :is('firefox/3')?'gecko ff3'
      :is('gecko/')?'gecko'
      :is('opera/9')?'opera opera9':/opera (\d)/.test(u)?'opera opera'+RegExp.$1
      :is('konqueror')?'konqueror'
      :is('applewebkit/')?'webkit safari'
      :is('mozilla/')?'gecko':'',
    (is('x11')||is('linux'))?' linux'
      :is('mac')?' mac'
      :is('win')?' win':''
  ].join(" "));
}();
</script>

 

Думаю после просмотра кода Вы поняли в чем суть этого скрипта.

Изменять css свойства для разных браузеров мы будем с помощью следующих css классов:

Классы ОС:

  • .win - Windows
  • .linux - Linux
  • .mac - MacOS

Ricky Gervais Live 2: Politics on dvd  

Классы браузеров:

  • .ie - все версии ИЕ
  • .ie8 - ИЕ 8.х
  • .ie7 - ИЕ 7.x
  • .ie6 - ИЕ 6.x
  • .ie5 - ИЕ 5.x
  • .gecko - все версии фаерфокса, и остальные гекко-браузеры
  • .ff2 - фаерфокс 2
  • .ff3 - фаерфокс 3
  • .opera - все версии оперы
  • .opera8 - опера 8.x
  • .opera9 - опера 9.x
  • .konqueror - konqueror
  • .safari - сафари

 

К примеру на нужно изменить цвет шрифта для третьей версии Firefox запущенной под Windows.

.win .ff3 {

color: #000000;

}

На мой взгляд, просто и гениально. Единственный минус этого способа — javascript, так что все юзеры с отключенным javascript'ом отсекаются.

Используйте на здоровье! ;-)

3791 Комментарий для “Css-хак под любой браузер &amp;mdash; легко!”

  1. Farouk 18 мая 2012 at 2:25 Permalink

    Superb blog you have here but I was curious about if you knew of any message boards that cover the same topics talked about here? I’d really like to be a part of online community where I can get suggestions from other experienced individuals that share the same interest. If you have any suggestions, please let me know. Bless you!

    Ответить
  2. Christian Faught 18 мая 2012 at 2:52 Permalink

    I think this is one of the most vital information for me. And i am glad reading your article. But want to remark on some general things, The web site style is wonderful, the articles is really excellent : D. Good job, cheers

    Ответить
  3. london heathrow to southampton 18 мая 2012 at 3:04 Permalink

    I really believe as a result. I’m sure your own post offer the individuals an excellent showing. And they’re going to communicate as a result of an individual after.

    Ответить
  4. Paras sivu 18 мая 2012 at 3:11 Permalink

    Youre so awesome, man! I cant believe I missed this blog for so long. Its just great stuff all round. Your design, man…too amazing! I cant wait to read what youve got next. I love everything that youre saying and want more, more, MORE! Keep this up, man! Its just too good.

    Ответить
  5. Samsung Galaxy S Forum 18 мая 2012 at 3:27 Permalink

    This is very interesting, You’re a very skilled blogger. I’ve joined your feed and look forward to seeking more of your excellent post. Also, I have shared your web site in my social networks!

    Ответить
  6. Polo lacoste 18 мая 2012 at 4:51 Permalink

    There is actually a lot to me to discover outside my guides. Thanks for your great study

    Ответить
← Предыдущие комментарии

Оставить комментарий