Adding buttons to the svg

HTML & CSS
22

UA means what?

I got it.

Which applies only to :focus

.thePlay:focus {
   outline: 0;
   box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
23

It means ‘User agent ‘. i.e. Your browser.

You encounter user agent styles every time you write html. Margins, padding, display, list bullets, input styling and so on. The browser applies suitable defaults to elements where it determines appropriate. One area the browser deems important and appropriate is to ensure focus styles are clearly visible.

1 Like
24

I’m using Chrome, what are all the defaults that the UA sets?

This would be one of them, what would the others be?

:focus {
   outline: 0;
}
25

This is Chrome’s defaults

https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css

Other browsers will have similar but not the same.

1 Like
26

Without explicitly stating outline: 0;

Is there a way to detect the presence of outline visibly in the code?

https://jsfiddle.net/x90u6gyh/

.thePlay:focus {
   box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
27

Open your developer tools window. Click show user agent styles. Set focus state on a focus able element from the devtools window and you will see the ua styles applied in the appropriate panel.

29

Can you take a screenshot of where I’m supposed to see it?

Is it supposed to say outline in dev tools?

nowhere inside dev tools inside styles, nothing reads outline.

I was looking for outline to be there, but I was not able to spot it.

30

In Chrome you have to force the focus-visible state which is what happens when tabbing and then you can see it.

image
image1920×1080 212 KB

1 Like
32

How do I remove the padding around these?
https://jsfiddle.net/70trc9a3/

How do I remove the red background outside of the border?

The red should only be inside the border.

33

I almost did it here:
https://jsfiddle.net/jfhmzkgt/

Fixed: removed position from here.
https://jsfiddle.net/n20ao13k/

.circle {
  width: 40px;
  height: 40px;
}

34

A button cannot contain a div as only phrasing content is allowed (like a span).

You could have used a pseudo element and saved html mark up but I;m guessing you could probably have applied those styl;es to the parent anyway with a bit of fiddling around.

35

span doesn’t work here:
https://jsfiddle.net/2c74rx5y/

     <button class="playc thePlay">
      <span class="circle"> <svg class="play" width="38" height="22" viewBox="0 0 26 26">
          <use href="#play" />
        </svg></span>
    </button>

36

What used to work instead of span?

1 Like
37

a div, but I was told a div can’t be used with button. Post # 34

38

What is the default display characteristic of a div?

1 Like
39

Any of these would work:

But I don’t think any of these would be right to use.

<header>
<nav>
<article>
<aside>
<main>
<details>
<summary>
<figure>
<dialog>
<menu>
<footer>
40

As I asked, what is the default display characteristic of a div?

2 Likes
41

I added display: block; now span works.
https://jsfiddle.net/ueL42ym3/1/

.circle {
  display: block;
}

   <button class="playa thePlay">
      <span class="circle"> <svg class="play" width="38" height="22" viewBox="0 0 26 26">
          <g id="play">
            <title>Play</title>
            <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
          </g>

        </svg> </span>
    </button>
1 Like
42

Very good.

2 Likes
43

Do you know why it works now?

This is basic css so make a little extra effort to understand the differences between the default display of elements especially which are inline elements and which are not and why some properties are display specific.

2 Likes