0

I have a situation where I need to have a separator between 2 items as shown in the plunk. I could think of 2 methods for this to do as

1) Put an empty span between items and style it like separator HTML:

  <body>
    <nav>
      <section class="icon1">Icon1</section>
      <span class="separator"></span>
      <section class="icon2">Icon2</section>
    </nav>
  </body>

CSS:

nav {height:40px; background:yellow; width:300px; padding:0 10px;}
.icon1{ background:green; width:40px; height:100%; float:left;}
.icon2 {background:red; width:40px; height:100%; float:left;}
.separator{width:2px; height:100%; background:blue; float:left;}

2) Use :before psuedo selector for 2nd item and style it accordingly

HTML:

  <body>
    <nav>
      <section class="icon1">Icon1</section>
      <section class="icon2">Icon2</section>
    </nav>
  </body>

CSS:

nav {height:40px; background:yellow; width:300px; padding:0 10px;}
.icon1{ background:green; width:40px; height:100%; float:left;}
.icon2 {background:red; width:40px; height:100%; float:left;}
.icon2:before{content:""; border-left:2px solid blue; position:absolute; height:40px;}

Plunk - http://plnkr.co/edit/a26btGkR8p5xcQeSxJiV?p=preview The plunk is for both options 1 and 2 combined, please un comment, if you would like to check.

Now, I have an action which is taken when user clicks on the 2nd item, which is a modal popover will open up and that 2nd item is highlighted i.e. it is over & above the backdrop.

If I use 2) above i.e. :before, and then I click on 2nd item, the modal popover shows, the 2nd item highlights but that separator also gets highlighted since technically it is inside that element. I do not want that separator to be highlighted, so, to make it appear like its faded, I am writing few lines of js to toggle its opacity ( on click of 2nd item) so it looks like its faded.

If I use 1) i.e. empty span there is no problem at all, no need to write js, it simply works fine.

So, my problem here is whether I

should use an empty span

OR

use :before and do some js

Which one would be semantically correct and also which one would be less burden on page.

whyAto8
  • 1,660
  • 4
  • 30
  • 56
  • See browser compatibility table at http://caniuse.com/#feat=css-gencontent and decide. `` works everywhere. – Kunj Sep 15 '14 at 12:25
  • @KunJ - I am not really worried about browser compatibility because in my case, we are just supporting all modern browsers i.e. no old IE's, so thats not an issue. – whyAto8 Sep 15 '14 at 14:36

2 Answers2

2

I would use the 2nd solution, since the separator is probably not necessary for a (probably handicapped) user to understand the context.

Jeremy
  • 566
  • 1
  • 6
  • 25
  • But wouldnt that pile up extra work i.e both css and js instead of having it simply in just empy element? I am just trying to understand it a little deeper. – whyAto8 Sep 15 '14 at 14:35
  • Yes, it would. But in my opinion, this is the fairly clearer solution, since it doesn't add HTML elements which aren't needed to understand your navigation and might confuse screen readers. – Jeremy Sep 16 '14 at 15:06
2

Both ways are semantically correct . i would recommend using the

<span class="separator"></span> method so that you can move your second icon with out worrying about the separator positioning .

for sure the ::before is more performance consuming ( definitely not noticeable )

  • remember that you also can use borders to make easy simple separators .
AlhasanIQ
  • 183
  • 2
  • 9
  • Well, if I use borders, that will also be highlighted, since that are a part of the element. I had tried that, but that wont help. Thanks for the advice though. I am still confused between the 2 options, is there a way we can measure the performance consumption in both cases? – whyAto8 Sep 15 '14 at 14:34
  • yes you can , use firebug .. it will give you the exact time in ms – AlhasanIQ Sep 15 '14 at 17:39