Is this correct markup - empty element OR use css/js to achieve same effect

Question

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 ie it is over & above the backdrop.

If I use 2) above ie :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) ie 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.

Answer 1

我将使用第二种解决方案，因为对于（可能有残障的）用户来说，理解上下文可能不是必需的。

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

Is this correct markup - empty element OR use css/js to achieve same effect

Question

2 answers

solution1
2 2014-09-15 12:27:28

solution2
2 2014-09-15 12:37:04

Is this correct markup - empty element OR use css/js to achieve same effect

Question

2 answers

solution1 2 2014-09-15 12:27:28

solution2 2 2014-09-15 12:37:04

solution1
2 2014-09-15 12:27:28

solution2
2 2014-09-15 12:37:04