Как сделать исполнение кода CSS в зависимости от его поддержки броузером?

[Launder]

У меня двух колоночное меню:

.menu > li		{			display: inline-block; 			vertical-align: top;				width: 50%;				border-right: 1px solid #fff;	/*белая линия в конце блока. вместе с серой линией тэга <a> образует бело-серую линию*/		}.menu a		{			text-decoration: none;			display: block;				text-align: center;				font-size: 14px;			border-right: 1px solid #dedede;	/*вместе с белой линией тега <li> образует бело-серую линию*/		}.menu > li:nth-child(2n), .menu > li:nth-child(2n) a 					{			border-right: none;	/*убираем у правых пунктов меню линии разграничения - они там не нужны, там граница самого меню*/		}

Поскольку бордюр тега <а> должен влезть в <li> у которого width: 50%, то тег <a> автоматически подвинется на ширину бордюра, а вот бордюр тега самого <li> никуда двигаться не станет, и сам подвинет следующий тег <li>, в результате ширина двух таких тегов будет больше 100% из-за бордюра.

Проблема решается просто добавлением li {box-sizing: border-box;}, но тогда у нас левые колонки уже правых на величину двух бордюров, тегов <a> и <li>. Не велика беда, конечно, но можно же сделать более красиво:

.menu > li:nth-child(2n+1)		{		width: -webkit-calc(50% - 1px);		width: -moz-calc(50% - 1px);		width: calc(50% - 1px);	

Тогда линия у нас будет точно по центру: одна полосочка тега <a> будет чуть левее, а полосочка тега <li> будет чуть правее.

Но вопрос, ведь спецификация calc хуже поддерживается броузерами чем border-box, можно ли как-то сделать, чтоб если calc не сработает, то сработал border-box?

[antonKar]

Псевдоэлементы в руки и никаких замут с шириной.

[Launder]

Хм, ну надо подумать.

 

А пока как вот такой вариант?:

.menu > li        {           box-sizing: border-box;           width: 50%;           display: inline-block;           vertical-align: top;        }.menu > li:nth-child(2n+1)        {           border-right: 1px solid #dedede;        }.menu > li:nth-child(2n)        {           border-left: 1px solid #fff;        }

[Launder]

Честно говоря, не совсем понятна идея с псевдоэлементом. Если его делать как просто псевдоэлемент состоящий из линии которая идёт сразу после блока, то чем эта идея отличается от использования просто border, если же использовать позиционирование и наложить псевдоэлементы поверх основного блока, то чем эта идея принципиально отличается от использования свойства border-box?

[zlodeev]

Так border-box'ом это и решается. 

[Launder]

border-box это решает не идеально

потому что если сделать так как я сделал во втором примере - то, в случае, если при выделении, я захочу убрать эти границы (и наложить, например, тень), то в соседнем блоке убирать границу мне будет сложнее. Иными словами:

.menu > li:nth-child(2n+1):hover     {          border-right: none;     }

работать будет, а вот на li:nth-child(2n) мне повлиять уже сложнее.

В случае же если я просто, в исходном примере, сделаю .menu > li border-box'ом, то ширина левого блока будет уже на величину равную толщине линий. Мелочь, конечно, но не приятно, и потом, две колонки, планируется применять для небольших разрешений. Видно это будет или нет - я не знаю, но хочется выяснить, как можно сделать чтоб всё было совсем ровненько.

Поэтому и хочется сделать исходное решение, как в первом примере, но если броузер у клиента не поддерживает свойство calc, то сделать заплатку с border-box'ом. Но я никогда не делал заплаток. Поэтому и спрашиваю

Edited October 3, 2015 by Launder

[infidel]

ссыль - вот в гугле нашел. Вроде идеально подходит, там и полифил есть.

[Launder]

@support not	{                width: -webkit-calc(50% - 1px);		width: -moz-calc(50% - 1px);		width: calc(50% - 1px);	        }            {   .menu > li                        {                           box-sizing: border-box;                        }            }

Так я понимаю? сверху этого написать width: 50%, снизу - width: calc(50% - 1px) (и так далее). И, по идее, будет работать... В случае если support поддерживается. если же ни support, ни calc не поддерживается, тогда...

можно по умолчанию .menu > li присвоить свойство border-box, и width: 50% а дальше:

@support 	{                width: -webkit-calc(50% - 1px);		width: -moz-calc(50% - 1px);		width: calc(50% - 1px);	        }            {                   .menu > li                        {                            box-sizing: content-box;                        }                       .menu > li:nth-child(2n+1)                        {                                                        width: -webkit-calc(50% - 1px);		            width: -moz-calc(50% - 1px);		            width: calc(50% - 1px);	                        }            }

Похоже?

JS, к сожалению, пока не владею, хотя, возможно решение с помощью него и более правильное. Что касается полифила и ссылки на гитхаб, то слова вроде знакомые, а смысл, к сожалению, ускользает...

Где и что прописывать?

[infidel]

Честно говоря не вникал в вашу проблему, вы бы дали ссылочку на jsfiddle с html, чтобы можно было наглядно посмотреть на результат выполнения кода без особых напрягов. Увидел, что вы видите решение проблемы в использовании разного кода в зависимости от поддержки, и самому стало интересно как это реализуется, и нагуглил. Полифилами сам никогда не пользовался, но полагаю там надо подлючить ихнюю либу + код реализующий поведение support(он же полифил) в случае если не поддерживается. Хотя скорее всего ваша проблема решается одним из предложенных выше способов, просто вы перемудрили где-то, опять же на 100% не уверен, возможно ваш случай уникален и вам непременно нужен support)

[Launder]

Честно говоря не вникал в вашу проблему, вы бы дали ссылочку на jsfiddle с html, чтобы можно было наглядно посмотреть на результат выполнения кода без особых напрягов.

 

http://jsfiddle.net/Launder/n6mbfzcu/

 

Ну вот как-то так...

 

 

 

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

 

 

Спасибо!

 

 

Полифилами сам никогда не пользовался, но полагаю там надо подлючить ихнюю либу + код реализующий поведение support(он же полифил) в случае если не поддерживается.

 

Ясно. Ну я где-то мимоходом видел что JQuery подключается подобным образом, но пока ни разу ничего подобного не делал. Может это и не сложно :-)

 

 

Хотя скорее всего ваша проблема решается одним из предложенных выше способов, просто вы перемудрили где-то, опять же на 100% не уверен, возможно ваш случай уникален и вам непременно нужен support)

 

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

[infidel]

@Launder, По моему все решает .menu > li { box-sizing:border-box}, ваш довод против этого варианта так и не понял, зачем влиять на соседний блок, и чем это решение хуже чем calc, даже если влиять зачем то и надо?

[Launder]

@Launder, По моему все решает .menu > li { box-sizing:border-box}, ваш довод против этого варианта так и не понял,

 

Тем, что левые столбцы станвятся уже правых на ширину этих линий. В данном случае это мелочь, но если бы бордюры были бы потолще а разрешение поменьше, то уже не мелочь. Поэтому хочется решить вопрос в общем виде.

 

 

зачем влиять на соседний блок, и чем это решение хуже чем calc, даже если влиять зачем то и надо?

 

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

[infidel]

Тем, что левые столбцы станвятся уже правых на ширину этих линий

 

Они не становятся уже.

[Launder]

Посмотрите, мне нужно, чтоб вот этот бордюр чёрный, был по центру. С border-box'ом это возможно, только если один бордюр сделать у левого блока, а один - у правого. Но мне это не подходит, поскольку мне нужно, чтоб при выделении, оба бордюра могли исчезать.

_{ЗЫ: кстати непонятно почему чтоб их склеить нужно было ставить margin: -2px;}

Edited October 4, 2015 by Launder

[infidel]

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

 

 

кстати непонятно почему чтоб их склеить нужно было ставить margin: -2px

Вот нагуглил - в примере с псевдоэлемнтами использован код с этой страницы, чтобы убрать отступы.

Edited October 4, 2015 by infidel

[Launder]

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

 

 

кстати непонятно почему чтоб их склеить нужно было ставить margin: -2px

Вот нагуглил - в примере с псевдоэлемнтами использован код с этой страницы, чтобы убрать отступы.

 

Да, это я запамятовал, по-поводу пробелов между инлайн-блоками сам открывал свою первую тему на этом форуме. А ссылочку на псевдоэлемент Вы мне дали, похоже, мою же...

Edited October 4, 2015 by Launder

[infidel]

похоже, мою же...

Ага, забыл форкнуть). Поправил ссылку.

[Launder]

Да, вот это уже интересней...

Вот, кстати, статья, на тему, чем удобен calc.

Ну, идея понятна. Делаем блочный псевдоэлемент, абсолютно его позиционируем относительно родительского элемента, задаём ему ширину и сдвигаем влево на половину ширины. При этом z-index'ом его делаем поверх всего и убираем при наведении на родительский элемент. Надо обдумать насколько такой вариант мне подходит и когда вообще имеет смысл действовать подобным образом... Полоски можно делать с помощью линейного градиента. как например вот тут, скажем, пример 4.

кстати, а зачем Вы использовали свойство letter-spacing? Разве inline-block считается не словами, а символами? (для пробелов между словами word-spacing).

Ну в моём примере, тень при выделении правых элементов закрывает полоску слева. А как она будет закрывать псевдоэлемент? сделать тени z-index больше?

Edited October 4, 2015 by Launder

[infidel]

а зачем Вы использовали свойство letter-spacing?

Понятия не имею, в статье на которую я дал ссылку автор объясняет это тем что в webkit браузерах таким образом убирается отступ в 1px появляющийся при применении первых двух свойств. Сеанс бубнотерапии это на мой взгляд.

[Launder]

Ну да, так и есть. В той теме, ссылку на которую я давал есть ссылка на превосходную статью на эту тему. Кстати, в приведённом мною коде данная проблема решается через задания font-size: 0 у родительского <ul> и восстановления размера шрифта у дочернего толи <li>, толи <a>. И, кстати, я ошибся, инлайн-блок, всё же, по сути, символ. Интересно, а чем принципиально символ отличается от слова? Вроде, в контексте статьи, разницы особой нет...

Edited October 4, 2015 by Launder

[infidel]

Ну в моём примере, тень при выделении правых элементов закрывает полоску слева. А как она будет закрывать псевдоэлемент? сделать тени z-index больше?

 

Да, только я не знаю насколько это кроссбраузерно, ведь у элемента с тенью position:relative а не absolute, вроде раньше в разных браузерах это по разному отрабатывало, хотя могу и ошибаться.

есть ссылка на превосходную статью на эту тему

Хорошая статья, спасибо. 

[Launder]

http://jsfiddle.net/Launder/tjf1hk0L/3/

 

С псевдоэлементом получилось как-то так...

Во-первых пришлось более тонко работать со скруглениями. Когда к пункту меню ставишь overflow: hidden, то есть убираешь всё то, что вылазяет за границы элемента, то псевдоэлмент почему-то отображается в пределах этого элемента! Не очень понимаю почему, вроде это другой элемент, но тем не менее, видимо считается дочерним, и соответственно обрезается. Пришлось это свойство убрать и прописывать скругления не только у родительского, но и у дочерних элементов.

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

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