Properly setting Class selectors in CSS

From what I saw on that page, there is no .button classname at all. So it no reason to be there at all.

 <div class="button">

    <svg class="play" viewbox="5 8 50 56">
      <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
      <path fill="#0059dd" d=

What you pasted there is not in the https://jsfiddle.net/9whjp0cw/7/ link that you gave in post #13

I posted 2 showing 2 different ways it works.

And you went with the 2nd one.

So the pages were much more different than I expected them to be. Thanks for the clarification.

1 Like

Is your answer different, or still the same?

My answer will always be correct because it relies on the aspect of semantics instead.

Yes if the “scalable” magic of SVG is wanted. I was more replicating the example units than being exact. In practice, I would likely use unitless numbers.

In the most basic case one pixel in an SVG document maps to one pixel on the output device (a.k.a. the screen). But SVG wouldn’t have the “Scalable” in its name, if there weren’t several possibilities to change this behaviour. Much like absolute and relative font sizes in CSS, SVG defines absolute units (ones with a dimensional identifier like “pt” or “cm”) and so-called user units, that lack that identifier and are plain numbers.

You asked that exact question yesterday, and I answered it. If there was something you didn’t understand, or you wanted to discuss it further, it would have been better to continue the discussion in the original topic.

Continually going round in circles, asking the same thing in different topics, is only going to lead to confusion - for you and everybody else.

3 Likes

And you were right it turns out.

I like to get opinions from lots of people.

Do you have any idea how rude and insulting that sounds?

If you don’t trust what I’m telling you, then there is no point in me offering you any further assistance.

It’s like buying a car. You ask people what they think. I didn’t mean for it to be insulting. You see what people think, I don’t understand what’s so bad about that. It’s coding, everyone has their own ways of doing things. Some people prefer this way, others prefer that way. You take in all the information you can get to formulate what you think will work best.

It’s not like buying a car, and you are insulting. If someone offers you a solution and you say, you’ll see what other people say, that’s insulting. It is why fewer and fewer people are willing to help you.

2 Likes

Everyone has different opinions when it comes to coding. Not everyone thinks the same way. What you do one way, another person may do another, so on, and so forth.

What’s wrong with getting as much information as you can get? I don’t get why that is a very bad thing to do.

You can move it to that topic if you’d like. That’s fine with me. If you think that would be better.

Indeed. But you are unable to distinguish good advice from bad, or good code from bad, even when it has been explained to you by somebody who is an authority on the subject.

Yesterday, @PaulOB gave you a simple, clear solution to a coding problem. But rather than using what he advised as best practice, you chose to do it a different way - and promptly ran into difficulty when trying to use your code with JS.

Paul is a recognised authority on CSS. He wrote the old SitePoint reference guide and has co-authored at least one book. He has created CSS techniques now used everywhere. It is a privilege to have him on these forums and to learn from his skill and expertise, yet your approach dismisses his knowledge as mere “opinion”. That’s insulting.

To use your own analogy, you would prefer to base your choice of car on your neighbour’s opinion, rather than that of a qualified motor mechanic, because your neighbour’s recommendation is a nicer colour.

3 Likes

People who are coders, not all coders code things the same way. Everyone has their own method, their own way so to speak.

Because the browser will display it as wide and as tall as it can until the css kicks in which on a slow connection can be a while so you get a big flash as the svg resizes. It’s been called a Fatwigo.

Images also should have their height and width attributes present in the html otherwise the browser doesn’t know how much space to allocate for them and again on slow connections you get a re-ordering of content while the page adjusts to the correct size (note that some very olde browsers would often overlap content if the attributes were missing as they were not very good at re-flowing the page while loading).

Suffice to say ‘best practice’ is to include width and height attributes in images and svg; even if you also control or over-ride later with css.

4 Likes