Disallow duplicate background images

HTML & CSS
21

Why are you using focusable="false" on your SVGs? I’m pretty sure it’s doing nothing, as it’s not a valid attribute, but surely you want your play buttons to be focusable.

22

Maybe I should remove it then?

My audio players don’t even work in ie.

The focusable attribute defined by SVG Tiny 1.2 is only implemented in Internet Explorer and Microsoft Edge.

https://allyjs.io/tutorials/focusing-in-svg.html

23

Why are you using it in the first place?

24

Google music was using it on one of their svg’s. so I looked it up, and thought I’d add it to mine.

I guess that wasn’t very smart of me.

1 Like
25

Am I supposed to add before on the 3rd rule-set?

Is it needed?

@PaulOB

Like this:

.wrapb,
.wrapb::before {
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
}

.wrapb::before,
.wrapb::after {

or like this?

.wrapb,
.wrapb::before {
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
}

.wrapb::after {

.wrapb {
  position: relative;
  width: 266px;
  height: 266px;
  cursor: pointer;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapb,
.wrapb::before {
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
}

.wrapb::before,
.wrapb::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  background-position: -260px 0;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}
26

Which way is correct?

Now I’m confused because all of these work.

@PaulOB

Which is right?

Wait, only 2 ways work, not 3 as I had before.

Is an After needed on it?

This one uses only before.

This Works:

.wrapb,
.wrapb::before {
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
}

.wrapb::before{

This one uses before and after.

This Works:

.wrapb,
.wrapb::before {
  background: url("https://i.imgur.com/Gxt4Z31.png") no-repeat 0 0;
}

.wrapb::before,
.wrapb::after {
27

Why would you want to place two elements on top (:before and :after)? You now have two stacked elements on top but only one with an image

Think about what you are doing with the rules. You seem to have forgotten that you were simply applying a background image to common elements. Did wrapb:after ever exist before?

It was. wrapb and .wrapb::before that shared a common image IIRC.

1 Like
28

Did wrapb:after ever exist before?

No, therefore it’s not needed.

29

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.