CSS-неймспейсы для Internet Explorer

Дабы не плодить кучи css-файлов для разных версий ишака, придумал такой скриптик:

/**
 * Adds css classes to body like ie, ie-6, ie-gte-5-5, ie-not-7, etc.
 * depends on msie browser version
 * 
 * @author Sergey S Yaglov
 * @link http://livestreet.ru/profile/1d10t/
 */
jQuery(function(){
	if(!jQuery.browser.msie){
		return;
	}
	var versions = ['5.5',6,7,8,9,10];
	var body = jQuery('body:eq(0)');
	var bv = jQuery.browser.version;
	var classes = ['ie'];
	var signs = {
		'==': '-',
		'>=': '-gte-',
		'>': '-gt-',
		'<=': '-lte-',
		'<': '-lt-',
		'!=': '-not-'
	};
	jQuery.each(versions, function(i,v){
		for(var sign in signs){
			var css_sign = signs[sign];
			eval('if(bv '+sign+' v){classes.push("ie"+css_sign+new String(v).replace(".","-"));};');
		}
	});
	body.addClass(classes.join(' '));
});


Применять в css-файлах можно, например, так:

.my-class { ... стиль для нормальных браузеров ... }
body.ie .my-class{ ... стиль для ненормальных браузеров :) ... }
body.ie-gte-7.ie-lte-8 .my-class{ ... стиль для ишаков от 7 до 8 версии включительно ... }

27 комментариев

avatar
решение из хтмл5бойлерплейт мне кажется правильнее
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

  • Vilz
  • +1
avatar
а чем таки правильнее? разве что работой с отключенным яваскриптом (а кто его, простите, щас отключает?)

у меня получается больше правил, больше возможностей для комбинирования )
avatar
хотя бы тем, что отрисовка быстрее будет. Не надо ждать загрузки всех яваскриптов для применения классов.
avatar
ок
avatar
эту конструкцию можно дополнить классами аналогичными тем что создаются у тебя, но как показывает практика в 99% случаев баги или на всех ие разом или не пересекаются по версиям, поэтому добавлять их тоже не обязательно. в редких случае классы можно перечислить через запятую
avatar
ок
avatar
Если страница не должна кэшироваться на стороне клиента, то ещё лучше повесить класс на стороне сервера и не таскать везде этот мусор. А ещё лучше верстать так, чтобы не было необходимости заниматься подобными фокусами.
avatar
Юзеров ИЕ ниже 7 версии я, как правило, просто игнорирую — ну не повезло им. К счастью, нет проектов, где они могли бы составлять сколько-нибудь значимую часть трафика.

А ХТМЛ5 пол ИЕ 6 — это вообще какой-то оксюморон
avatar
за хтмл5 тут только вилз что-то сказал, и то в контексте другой штуковины
avatar
почему оксюморон? можно использовать вполне
avatar
Ну, не знаю, у меня разрыв шаблона происходит. ИЕ6 — это для меня прошлый век, ХТМЛ5 — технологии нового века. Для кого я делаю? Для людей какого века? Я предпочитаю все же каких-то стандартов придерживаться. Если хочу повернуться лицом к «старичкам», то это либо HTML4, либо XHTML. Если под современную публику — HTML5. Я в последнее время даже префиксов -moz-..., -o-… и им подобных стараюсь не использовать, только стандартные свойства.
avatar
Даже ютуб перестал ие6 поддерживать, не говоря уже о самом Майкрософт, так чего мы должны. ИЕ7 тоже уже в нафталине. Я когда-то посчитал, что на поддержку ие6 убивается 50% времени при верстке. Кому такое счастье надо?
avatar
а 85% статистики придумываются на ходу
avatar
85,65793% если быть точным
avatar
Нужно понимать мотивацию тех, кто принимает такие решения и лишь после этого козырять громкими брендами. Всё-таки рядовой специалист из России и мировые гиганты решают разные проблемы и работают с разной аудиторией.

В случае с ютубом это связано с тем, что в ie6 чаще всего установлена устаревшая версия флэша, что критично для видеохостинга. Ютуб таким пользователям предлагает скачать chrome frame, что решает проблему с видеокодеками. С Майкрософтом тем более всё ясно — жизненный цикл продукта подошёл к концу, им нужно продвигать свои обновлённые решения.
avatar
ну это холивар. Я все же считаю, что пока все не перестанут поддерживать даже не устаревшее, а раритетное ПО, то искоренить его пользователей не получится. К тому же поддержку ие6 нельзя, например, сравнить с наличием в форматах PAL/SECAM более избыточных, чем RGB, цветоразностных сигналов, чтобы на черно-белых телевизорах можно было смотреть цветные передачи. Телевизор поменять труднее, чем браузер, да и денег стоит. а тут дело одного клика
avatar
Это не холивар. Решать, какие браузеры поддерживать, должен заказчик исходя из своих задач и структуры аудитории. Когда специалист декларирует, что он принципиально не работает с таким-то браузерами — он просто расписывается в своём непрофессионализме.
avatar
никто не мешает за это прибавить ему к стоимости
avatar
полностью согласен
avatar
ну делаешь ты сайт с помощью семантической разметки хтмл5(header footer section article aside), что теперь для всех с ие6 нафиг слать из-за такой приятности?
avatar
вот как на духу: если я реально хочу на ХТМЛ5 чего-то делать, то на юзеров с ИЕ6 абсолютно пофиг будет, даже думать не буду о них
avatar
конечно не нужно слать, ie6 прекрасно понимает такую разметку
avatar
понимает, если ему сказать что их надо понимать. да и в общем разговор не про то. я учитываю ие при вёрстке, шестой — что бы всё функционально работало и седьмой\восьмой в упрощённом виде. дополнительный цсс для этого писать приходится, но не то что бы это отнимало какое-то чувствительное время
avatar
скажите это иконочным спрайтам с алфаканалом, которые еще и меняются при наведении
avatar
это нужно говорить тем, кто не умеет работать с такими вещами
avatar
Решения есть. Если так лень морочиться — меняете иконочные спрайты с альфаканалом на иконочные спрайты с картой прозрачности и для ие6 наблюдаете рубленые края, что часто вообще ни разу не смертельно. Времена, когда надо было что бы во всех браузерах всё было пиксель в пиксель к счастью почти полностью ушли. Грейсфул деградейшн — вся фигня
avatar
зачастую и приходится упрощать
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.