Jump to content
  • 0

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


Launder
 Share

Question

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

.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?

Link to comment
Share on other sites

21 answers to this question

Recommended Posts

  • 0

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

 

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

.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;        }
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Edited by Launder
Link to comment
Share on other sites

  • 0
@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, к сожалению, пока не владею, хотя, возможно решение с помощью него и более правильное. Что касается полифила и ссылки на гитхаб, то слова вроде знакомые, а смысл, к сожалению, ускользает...

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

 

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

 

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

 

 

 

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

 

 

Спасибо!

 

 

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

 

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

 

 

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

 

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

 

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

 

 

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

 

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

Link to comment
Share on other sites

  • 0

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

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

Edited by Launder
Link to comment
Share on other sites

  • 0

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

 

 

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

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

Edited by infidel
Link to comment
Share on other sites

  • 0

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

 

 

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

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

 

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

Edited by Launder
Link to comment
Share on other sites

  • 0

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


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


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

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


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

Edited by Launder
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

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

Edited by Launder
  • Like 1
Link to comment
Share on other sites

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

 

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

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

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

Link to comment
Share on other sites

  • 0

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

 

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Xandr555
      Добрый день. Размещено 2 блока по 3 изображения, отцентрировано flex, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не выравнивается. В IE 11 рамка всплывает, текст не выравнивается. Заранее благодарю.
      <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">По Вашему желанию электропроводку можно уложить в ПВХ-короб</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Красиво, эстетично и надежно - наше кредо!</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Такой вариант электропроводки рекомендуем, например, в подсобных постройках</section></figcaption> </figure> </div> </div> </div> <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">Вмонтированный в стену электросчетчик делает Вашу квартиру более объемной</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Устанавливайте новые светильники, мы поможем подобрать их по мощности</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Мы устанавливаем розетки и выключатели в любой компоновке</section></figcaption> </figure> </div> </div> </div> *, *:after, *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .wrapper{margin:0 auto} .demo-content { text-align: center; } .part{max-height:310px;max-height:100%;display:flex;display:-moz-flex;display: -webkit-flex;justify-content:center} figure.img-box { text-align: center; position: relative; display: inline-block; overflow: hidden; margin: 3px 3px; max-width: 300px; width:100%; background-color:#DCDCDC; -webkit-box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); } figure.img-box * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } figure.img-box img { max-width: 100%; vertical-align: top; } figure.img-box figcaption { position:absolute; top:0; bottom:0; left:0; right:0; align-items:center; z-index:1; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; flex-direction:column; -webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; justify-content:center; opacity:0; } figure.img-box:after { border: 8px solid #FF0000; position: absolute; content: ""; display: block; top: 50%; bottom: 50%; left: 0; right: 0; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; opacity: 0; } figure.img-box:hover img { opacity:0.2; } figure.img-box:hover:after { top: 0; bottom: 0; opacity: 0.9; } .img-box .imgone { font-family:'Roboto',sans-serif; color:#00008B; font-size:16px; font-weight: 400; margin: 0; padding:0 10px; transform: scale(0); -webkit-transform:scale(0); -ms-transform:scale(0); -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; } .img-box:hover figcaption, .img-box:hover .imgone { transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); opacity: 1; } скриншоты прилагаю



    • By Coshe
      У меня есть один блок, во всех браузерах он отображается нормально, но в Mozilla нет. Проблема оказалась в box-sizing. Прочитав на этом сайте об этом тебе я обнаружил что начиная с Mozilla 1.0+ этот тег не воспринимается. Но что мне тогда делать? Ведь блок вылазит за свои рамки! Я пробовал -moz-box-sizing: border-box; он начинает видеть этот тег но вообще никак не реагирует на него. 
      Как быть? 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy