k0rzhik Jul 9 2008 at 11:27

css fix для различных браузеров

2 min

12K

Website development*

+149

132

Comments 132

vastvision Jul 9 2008 at 11:36

Вот, вот, вещь нужная 100%
Спасибо.

Toshik Jul 9 2008 at 11:36

Спасибо большое за данную фичу очень пригодится в жизни :)

NamelessOne Jul 9 2008 at 11:39

Большое человеческое спасибо!

bidlocoder Jul 9 2008 at 11:39

Ну такую функцию можно было и без jQuery написать

bidlocoder Jul 9 2008 at 11:58

Вот теперь гуд!

k0rzhik Jul 9 2008 at 12:01

Это ж хорошо, что гуд ;)

UFO just landed and posted this here

inlanger Jul 9 2008 at 12:04

Это не индивидумы, а странные люди. Таким надо отрывать конечности, за фразы - "я отключил яваскрипт, почему теперь не работает функция?"

-2

UFO just landed and posted this here

k0rzhik Jul 9 2008 at 12:10

OMG ENABLE JAVASCRIPT YOU NOOB!! :)

k0rzhik Jul 9 2008 at 12:11

черт, хабр ноускрипт сожрал :(

UFO just landed and posted this here

homm Jul 9 2008 at 13:22

У меня не работала функция копирования текста со страницы. Я отключил яваскрипт, скопировал текст. Я не прав? Иди оторви себе сам что-нибудь.

UFO just landed and posted this here

homm Jul 9 2008 at 13:47

> Это не "не работала функция", а хозяин пытался запретить копировать текст!
Как будто это кому-то не понятно было.

Что правильно? Что JS должен быть включен везде и всегда?

Приведу другой пример.
Когда http://translate.google.com/ только открылся, в бете оперы 9.5 работать в нем было невозможно. А вот если JS отключить — вполне работал. Дак почему бы мне его не отключить на том сайте? Хотя я знаю почему, потому что вы не гугл, у вас наверное не будет ни желания ни возможности сделать рабочий интерфейс без JS, поэтому ваш сайт будет работать только в браузерах, в которых вы его протестируете.

UFO just landed and posted this here

khim Jul 9 2008 at 15:42

Воровать тексты плохо.

Воровать тексты - плохо. Цитировать - хорошо. Не было бы хорошо, не было бы в законе даже специально предназначенных правил объясняющих когда и как это делать в случае, когда владелец текста этого явно не разрешил.

UFO just landed and posted this here

EugeneDest Jul 9 2008 at 18:07

Такой афтар пусть запишет свой текст на дискету, спрячет её в сейф, и надев этот сейф на шею прыгнет с моста в реку... Там его текст ниииикто не станет копировать.

ZUGA Jul 9 2008 at 20:04

И даже после такого "хитрого" маневра, кому надо, тот прочитает.

UFO just landed and posted this here

inlanger Jul 9 2008 at 13:39

Я имел в виду людей, отключающих яваскрипт совсем, а не для единичных случаев.

-1

homm Jul 9 2008 at 13:52

Я могу отключить яваскрипт совсем для твоего сайта, если он сделате мне подобную подляну или не будет работать корректно по иным причинам.

arty Jul 9 2008 at 14:41

для того, чтобы работать с html, должно быть достаточно умения работы с html

веб-приложения типа гуглокарт и гугломыла — это одно, а веб-сайты — это другое

S2nek Jul 9 2008 at 22:38

Сначала оторвите конечности разработчикам и-за которых так приходится поступать.

klierik Jul 9 2008 at 12:13

что бы избавиться от _height и тд и тп надо использовать условные комментарии. Получаем Валидный CSS ;)

UFO just landed and posted this here

an9eldust Jul 9 2008 at 12:34

>условный комментарий - это хак.
ORLY?

UFO just landed and posted this here

k0rzhik Jul 9 2008 at 12:42

#id{color:#fff}
html>body #id{color:#333}

-3

UFO just landed and posted this here

k0rzhik Jul 9 2008 at 13:01

а также проблемы ~70% юзеров, которые им пользуются?

UFO just landed and posted this here

k0rzhik Jul 9 2008 at 13:23

а вообще с этими юзерами надо делать так
html>
head>
script>
for (x in document.write) { document.write(x);}
/script>
/head>
body>
noscript>
style>@;/*
/noscript>
/body>/html> :)

-1

Sabiko Jul 9 2008 at 15:12

Повторюсь) Хак это не невалидный и недументировнный коктейль из палочек и звёздочек.
"поддерживаемое чем-то одним" — йес. И именно поэтому какое-нибудь html:first-child .style {} — хак для О., будь он хоть тысячу раз документирован.
Фишка и определение хака как раз в том, что ты никогда не знаешь, что ещё начнёт его поддерживать и что вдруг перестанет.

UFO just landed and posted this here

k0rzhik Jul 9 2008 at 13:14

Ну это уже не в этом блоге обсуждать :)
а что тогда по-вашему #id{_background:#03F;}?

-1

UFO just landed and posted this here

besisland Jul 9 2008 at 17:05

Чем это противоречит спецификации CSS?

UFO just landed and posted this here

besisland Jul 9 2008 at 22:27

Спецификация CSS не запрещает указывать свойство «_background» и содержит прямые и однозначные указания на сей счёт.

UFO just landed and posted this here

besisland Jul 9 2008 at 22:49

См. 4.1.2.1 и 4.2.

UFO just landed and posted this here

besisland Jul 10 2008 at 00:33

Учите матчасть.

1. Нормативной версией является только английская.

2. Одобренного W3C русского перевода CSS 2.1 не существует.

3. В русском переводе CSS 2.0 имеется, по крайней мере, упомянутое правило в секции 4.2.

UFO just landed and posted this here

an9eldust Jul 9 2008 at 13:21

В отличие от, мгм, хаков, conditional comments никак не повлияют на валидность вашего кода.

UFO just landed and posted this here

Sabiko Jul 9 2008 at 15:02

Хак — это такая инструкция, которую на данный момент понимает определённый браузер или группа браузеров.
Абстрактно — есть некий хак, работающий в IE6 и 7, в восьмом он работать перестал. А ошибка, которую вы исправляли с помощью хака, в восьмом осталась. Или ещё абстрактнее: в сырой версии браузера хак работал, и вы его осознанно использовали под этот браузер, а потом разработчики выбустили багфикс и хак умер.

Кондишенал комментс — это средство, предусмотренное разработчиками, и оно будет всегда срабатывать именно под те браузеры, под которые вы задумали. К хакам никакого отношения не имеет.

UFO just landed and posted this here

muhas Jul 9 2008 at 11:46

Спасибо.
в закладки, прикодиться когда-нить

mytribune Jul 9 2008 at 12:07

Решение короткое и изящное, спасибо!
Вспоминаются мрачные времена mac.domain.ru и koi.domain.ru... Ещё обычно было два css файла: ie.css и netsc.css :) Так хотелось от этого избавиться. Но, увы, пока надо продолжать терпеть несоответствия стандартам или их неточности.

vyacheslavka Jul 9 2008 at 12:07

Не убирайте статью

Decaz Jul 9 2008 at 12:18

Занеси в избранное.

vyacheslavka Jul 9 2008 at 12:20

забавно:) вы серьезно думали что я просил не убирать статью с главной:)?

Olegas Jul 9 2008 at 12:17

Круто! Но IE6 не всегда корректно обрабатывает .class1.class2 =(

UFO just landed and posted this here

vladzima Jul 9 2008 at 12:21

Спасибо! Всегда мучался этим вопросом.

itlife Jul 9 2008 at 12:22

Можно ещё так.. на условных комментариях... вообще без js .. ну если мало то в конкретных случаях ещё добавляем скрипт в частости скрипт о котором говорится в статье

</head>
<script type="'text">
$(function(){
if($.browser.opera)$('body').addClass('opera');
if($.browser.safari)$('body').addClass('safari');
});
</script>
</head>
#!--[if lte IE 6]><body class="ie6 ie7 ie8">#![endif]-->
#!--[if lte IE 7]><body class="ie7 ie8">#![endif]-->
#!--[if lte IE 8]><body class="ie8">#![endif]-->
#![if !IE]><body class="noie">#![endif]>

</body>

Решётку(#) надо заменить на <
в ie7 на выходе у body будет класс "ie7 ie8" а у ie6 будет "ie6 ie7 ie8"
Так удобно.. так как имхо если делается корректура для ie7 то тем более её надо делать и для ie6 бывает наверно и исключения... Opera и safari добавил для примера чаще достаточно одного ie6.
Если условные комментарии повесить на div то будет и успешная валидация xhtml

UFO just landed and posted this here

LightAlloy Jul 9 2008 at 12:27

а как быть с "абстрактной ситуацией" (firefox и мак)?

itlife Jul 9 2008 at 12:42

использовать скрипт из топика и исключения в css) или переделать вёрстку так чтобы не требовалось разделение мак - не мак, помоему это всегда возможно.

UFO just landed and posted this here

caIIIa Jul 9 2008 at 16:46

Это вы какую-то фигню говорите, да и мак-юзеры, как правило, постоянно и централизованно обновляют все программы до последней версии...

itlife Jul 9 2008 at 12:29

Забыл сказать, что приведён класный скрипт спасибо.
Мой пример это то чем сам пользуюсь...
да в услоный комментариях операционку не определишь=)

Wharfadale Jul 9 2008 at 12:24

Всё хорошо, конечно, но, к сожалению, этот скрипт хорошо только на 70-80%, так как иногда ява-скрипты просто отключают:(

try4tune Jul 9 2008 at 13:28

Сейчас без javascript 90% сайтов будут работать некорректно.

Wharfadale Jul 9 2008 at 13:52

У меня начальник на предыдущей работе ставил огнелисы и блокировал исполнение яваскриптов на всех компах:)

small_jam Jul 9 2008 at 13:57

Насяльника непонимать нас хайтек?

UFO just landed and posted this here

small_jam Jul 9 2008 at 14:09

Корпоративный сайт, как портрет Мао ))

UFO just landed and posted this here

Wharfadale Jul 9 2008 at 14:09

Насялника раздражал попап
А минусанули и правда зря, я только недавно разговаривал с одним разработчиком, так вот он предлагал поставить скрипт. Я целых три дня потратил на то, чтобы разобраться, нужно илил нет. Так вот помимо статистики, пообщался со многими программёрами и разработчиками. Они сказали ни в коем случае не ставить js.
Я бы сейчас выложил что нарыл, да вот только найти не могу.
Кстати, всем мой совет: верстайте так, чтобы было кроссбраузерно в любом случае! Это несложно, многие даже и не подразумевают, какие возможности html и css хранит спецификация.

UFO just landed and posted this here

Wharfadale Jul 9 2008 at 14:30

Опередили. Вот тут больше и лучше:)

UFO just landed and posted this here

Wharfadale Jul 9 2008 at 14:38

Мне почему-то показалось, что по вашей ссылке она неполная(?):)
Попытался ссылку вставить, но не получилось:( http://pyramidin.narod.ru/html401/

UFO just landed and posted this here

small_jam Jul 9 2008 at 14:13

да не минусовал я вас, прицепились :)
а история конечно забавна, все равно что спросить "нужны бонусы или нет"
яваскрипт доставляет в разы меньше проблем, чем плюсов, если использовать с головой конечно

UFO just landed and posted this here

Wharfadale Jul 9 2008 at 14:22

Он потом вообще на Линукс пересел... и весь офЕсный планктон пересадил))))

small_jam Jul 9 2008 at 13:48

93%-95% =)

bidlocoder Jul 9 2008 at 13:52

Я вот тоже хотел сначала написать, что нифига не не 70-80%. Потом пошел на http://gs.spylog.ru/r/?reportId=14&categ…
Если верить этой статистики, то получается 20% без js сидят. Удивило. Так что зря наверное минусанули.

bidlocoder Jul 9 2008 at 13:55

Упс. Фигню написал. Столбцы перепутал :)
Где кстати актульную статистику по js посмотреть?

UFO just landed and posted this here

small_jam Jul 9 2008 at 13:56

Простите, но спайлог не авторитет
http://www.w3schools.com/browsers/browse…

bidlocoder Jul 9 2008 at 13:59

спс

Jenek Jul 9 2008 at 14:59

этот скрипт можно и на сервере реализовать

TimSparrow Jul 9 2008 at 12:26

полезная вещь, добавил в закладки

amduscias Jul 9 2008 at 12:28

Клевый скрипт! Мог бы плюсануть, обязательно бы сделал это

-5

Goganchic Jul 9 2008 at 12:34

Однозначно нужная вещь! Без вопросов "+" в карму :)

-3

ipod Jul 9 2008 at 12:36

Сам писал нечто подобное, но без ОСей.
Чтобы небыло пресловутой зависимости от JS, можно вынести подобную логику на серверную часть.
А за класс спасибо)

AlexDebian Jul 9 2008 at 12:40

Спасибо

-1

Aux Jul 9 2008 at 12:42

Хорошая статья! Жаль не могу поставить плюс...

-1

izorg Jul 9 2008 at 12:58

В случае jQuery уже есть такой плагин http://jquery.thewikies.com/browser/#features. В нём уже есть весь этот функционал. В первой версии там даже функция была addSelector для отдельных элементов, а не только html, но addClass'a теперь уже достаточно.

k0rzhik Jul 9 2008 at 13:09

This was all written in the following languages.
1. jQuery v.1.2.6
2. jQuery Flash v.1.01 ~ 8.4kb
3. jQuery sIFR v.2.0b ~ 7.4kb
4. jQuery browser ~ 2.5kb

есть разница?

-1

izorg Jul 9 2008 at 13:39

Не совсем понял вопрос про разницу. Если вопрос в том, что необходимо для плагина Browser, то кроме jQuery ему ничего не нужно. А то, что автор пишет какими средствами он пользовался при создании сайта, то тут конечно я его и сам не совсем понимаю ;)

small_jam Jul 9 2008 at 13:51

размер имеет значение

izorg Jul 9 2008 at 14:00

согласен, размер важен, но jQuery я использую почти всегда, т.к. сокращается мой код, а jQuery Browser подключается исключительно там, где это необходимо, да и всё же весит это добро в minified варианте 1.22Kb, что совсем уж незаметно ;)

Я лишь хотел указать, что подобное решение уже существует и развивается (уже версия 2.0). Если же Вы сами для своих нужд это написало - МОЛОДЕЦ. Я бы с радостью плюсанул такое начинание, т.к. сам лентяйничаю делать что-либо подобное, а вот использовать всегда рад :)

k0rzhik Jul 9 2008 at 13:54

Да, пардон, посмотрел исходник. Думал просто ему все плагины нужны для работы. Не сплю уже часов просто :(
ЗЫ тот код кстати больше ;)

Astralian Jul 9 2008 at 13:17

Спасибо. По любому в будущем пригодиться.
Кстати давно небыло никаких статей в ВебДеве.

xmagnusx Jul 9 2008 at 13:33

добавил в закладки.
спасибо

eatart Jul 9 2008 at 13:39

отличное решение. но, все таки надеюсь, не пригодится

pepelsbey Jul 9 2008 at 14:47

Имхо, определение IE из данной функции стоит убрать, потому как условные комментарии не просто позволяют делать это очень гибко, но ещё и избавляют нормальные браузеры от лишнего трафика.

Ну или в любом случае заменить определение IE на максимально стабильное, безо всяких операций со строками:

/*@cc_on

    @if (@_jscript_version < 5.7)

        ltIE7 = true

    @end

    @if (@_jscript_version < 5.6)

        ltIE6 = true

    @end

@*/

neudor Jul 9 2008 at 15:38

k0rzhik, ты молодец.

hemper Jul 9 2008 at 16:00

Когда-то портировал из ExtJs в Prototype подобное, может кому-то пригодится ;)

Util = {};
Browser = Prototype.Browser;
(function() {
var ua = navigator.userAgent.toLowerCase();

Browser.Opera = ua.indexOf("opera") > -1;
Browser.Safari = (/webkit|khtml/).test(ua);
Browser.IE = !Browser.Opera && ua.indexOf("msie") > -1 && window.attachEvent;
Browser.IE7 = !Browser.Opera && ua.indexOf("msie 7") > -1;
Browser.IE6 = Browser.IE && !Browser.IE7;
Browser.Gecko = !Browser.Safari && ua.indexOf("gecko") > -1;
Browser.Strict = document.compatMode == "CSS1Compat";
Browser.BorderBox = Browser.IE && !Browser.Strict;
Browser.PngSupport = true;
Browser.AjaxSupport = Ajax.getTransport();
Browser.Secure = window.location.href.toLowerCase().indexOf("https") === 0;
Browser.Nice = (typeof encodeURIComponent != 'undefined') && (typeof document.getElementById != 'undefined');

if (Browser.IE) {
var v = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
if (v != null && Number(v[1]) < 5.5) Browser.PngSupport = false;
};

// remove css image flicker
if (Browser.IE6) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}
};
})();

Util.Dom = {
attachBrowserCss: function() {
var bd = Util.Dom.getBody();
if (!bd) {
return;
}

var cls = [Browser.IE ? "ie " + (Browser.IE6 ? 'ie6': 'ie7') :
Browser.Gecko ? "gecko":
Browser.Opera ? "opera":
Browser.Safari ? "safari": ""];

if (Browser.PngSupport) cls.push("png");
if (Browser.Mac) cls.push("mac");
if (Browser.Linux) cls.push("linux");
if (Browser.BorderBox) cls.push('border-box');
if (Browser.Strict) { // add to the parent to allow for selectors like ".strict .ie"
var p = bd.parentNode;
if (p) p.className += ' strict';
}
bd.addClassName(cls.join(' '));
},

getBody: function() {
return $(document.body || document.documentElement);
}
};

lig Jul 9 2008 at 17:11

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

нормальный верстальщик может и должен писать кроссплатформенный css.

said enough.

-1

UFO just landed and posted this here

lig Jul 9 2008 at 21:22

не в зоопарке дело... а в профессионализме

i-phone - это уже мобильное, там пока единое найти трудно, хотя, на самом деле, тоже отлично находится, когда желание есть

а когда желание "хаки" вешать, тогда уже и о профессионализме речи нет

UFO just landed and posted this here

oRb Jul 9 2008 at 17:27

не сдержался)

k0rzhik Jul 9 2008 at 17:51

Меня уже откровенно вырубает, спать хочу..
Но что-то я не понял, в чем подвох?

-1

atri Jul 9 2008 at 18:45

подвох в том, что на скриншоте опера, а скрипт выдает мозиллу... и оперу тоже

homm Jul 9 2008 at 20:07

Насколько я вижу по строке, скрипт выдает ваш юзер-агент.

ZUGA Jul 9 2008 at 20:26

Этот подвох является функцией оперы. Вклчючается и выключается вашими руками.

oRb Jul 9 2008 at 21:05

именно! Маскировка под лису меняет только юзерагент, а парсинг и рендер остается от оперы. Конечно айдитория, которая пользуется маскировкой под лису весьма мала, но она все же есть.

UFO just landed and posted this here

lig Jul 9 2008 at 21:40

javascript для форматирования контента - зло

UFO just landed and posted this here

DmitryBaranovskiy Jul 10 2008 at 03:22

Плыли-плыли и приплыли. Сколько уже раз писалось и говорилось об опасности browser sniffing?
Если вы горе-верстальщик, то JavaScript вам не поможет, а это ламерство уже в печени сидит.
«Ах, какой полезный скрипт!» Да вы что? Шутить изволите? Почитайте хотя бы это на вскидку: http://dev.opera.com/articles/view/a-bro…
http://www.quirksmode.org/blog/archives/…

mocksoul Jul 13 2008 at 01:48

идиотизм

у меня получается поддерживать в весьма не простом дизайне все 14 браузеров (ff2/ff3 win+mac+lin, safari2/3 win+mac, konqueror-3.5.8/3.5.9, ie6, ie7, ie8beta, opera 9.2x/9.5x) без ветвлений в верстке вообще.

И вам советую так же.

dfuse Oct 28 2008 at 11:33

www.quirksmode.org/blog/archives/2006/07/browser_detect.html — хорошая, пусть и немного старая, статейка на тему определения браузера. В кратце — ничему нельзя доверять. Даже navigator.vendor нельзя доверять, тем более userAgent.

TuTbaker Jul 1 2009 at 08:47

В FF3.5 не работает :( пишу gecko — ноль внимания

Show the best of all time