CODEWITHSUNDEEP
javascripthtmlcsssemanticspseudo-class
whyAto8
whyAto8

Reputation: 1670

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

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.

Upvotes: 0

Views: 64

Answers (2)

AlhasanIQ
AlhasanIQ

Reputation: 183

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 .

Upvotes: 2

Jeremy
Jeremy

Reputation: 576

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

Upvotes: 2

Related Questions