Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Fun debate, I really am sad that I enjoy these types of conversations 🤣🤣
For the firefox thing, I invite you to update your browser because the support of conic-gradient() there is something new but available on the new Firefox Browser.
Firefox is bang up to date, so I am guessing you are on Mac maybe as I am Windows? (the coincidence that your colours nearly match the firefox logo when I took this screenshot made me smile as I am a nerd 😋)
Also looks a bit strange on iPhone browser within dev.to app (guessing Safari based) for some reason (the rounded corners don't work on some parts of the shapes...is very odd I can't pinpoint what is causing that!) but the shapes work fine, that just appears to be some issue with the rounding part.
I am not scared about SVG ;)
I didn't mean you are scared of SVG so apologies there as I didn't phrase that well, I just see loads of posts with people battering CSS to do the job of an SVG and it was meant more as a general observation.
you can easily use media query to adjust the layout
Agree on ease of adjusting layouts, as I said hexagons was a prime example where SVG would not be a logical choice for a layout etc.
I doubt we can easily do this with SVG :)
Also entirely agree on the background jsfiddle with the strange shape "X" with rounded corners, easier in CSS and a prime use case where it would degrade gracefully and not impact the page in any way.
We can rely on CSS variables to easily control the different values (colors, position, size, etc). With SVG most of the control is done with attributes and not all of them have CSS equivalent.
Every single item in SVG can be controlled so not sure what properties you mean here? You can add a class to an item and manipulate it (there is not a single inline style or attribute in the HTML of my old website, which would be near impossible to build in CSS if we are coming up with "SVG can't do that" vs "CSS can't do that" scenarios 😋).
You can translate, scale, change fill colour etc. with no issue. (I may have missed the point you were trying to make here as I am sure there are some things that are difficult).
You can easily add random content when dealing with CSS which is a great thing for accessibility
I am also especially in favour of SVG as the preference over CSS as <title> and <desc> provide a lot of baked in support for screen readers if an image has purpose (sadly content: <string> / <alt description> has poor support`. )
For decorative only stuff CSS works fine, also for simple shapes it is great too.
if you don't like the padding trick we can still consider the use of CSS variables:
The CSS variable doesn't work for being responsive as it won't resize, so you would have to use some interesting calc to make that work in a responsive fashion I presume (or use vw units I suppose, but that seems messy). In comparison with SVG just set the width to 100% within a container and it will do all the magic for you as you resize the container, maintaining it's aspect ratio unless you tell it otherwise.
or the new aspect-ratio property
aspect-ratio is going to be a game changer, but once again support is the big enemy at the moment. Why we didn't have that years ago is beyond me! I can't wait to be able to use it in production (which at the rate of roll out will hopefully be soon!)
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I don’t have any plugins on Firefox so that is the only thing I can think of, maybe there is some strange rendering race conditions going on that a plugin inadvertently fixes?
Either that or display resolution, I’m running 4K monitors? I mean completely grabbing at straws here as same version and same OS should mean consistent results surely lol!
If we get into a position where we can’t even rely on version numbering for feature consistency then we are certainly doomed lol!
I don't know too but try the clip-path and background without the filter. Probably the issue is the filter. Try also outside codepen. Sometimes Codepen & co are buggy
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I loved you old website @inhuofficial
, I was looking for some inspirations for my website and this is great... Can I have a link for your current one please?
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Not done yet, we go live in 2 weeks but the url is inhu.co if you want to bookmark it. 10th March is our launch date for the site (and the company!). If you want to drop me a message using the contact form on klu.io I will drop you over the designs as a sneak peak and a few others for inspiration if you want.
Fun debate, I really am sad that I enjoy these types of conversations 🤣🤣
For the firefox thing, I invite you to update your browser because the support of conic-gradient() there is something new but available on the new Firefox Browser.
Firefox is bang up to date, so I am guessing you are on Mac maybe as I am Windows? (the coincidence that your colours nearly match the firefox logo when I took this screenshot made me smile as I am a nerd 😋)
Also looks a bit strange on iPhone browser within dev.to app (guessing Safari based) for some reason (the rounded corners don't work on some parts of the shapes...is very odd I can't pinpoint what is causing that!) but the shapes work fine, that just appears to be some issue with the rounding part.
I am not scared about SVG ;)
I didn't mean you are scared of SVG so apologies there as I didn't phrase that well, I just see loads of posts with people battering CSS to do the job of an SVG and it was meant more as a general observation.
you can easily use media query to adjust the layout
Agree on ease of adjusting layouts, as I said hexagons was a prime example where SVG would not be a logical choice for a layout etc.
I doubt we can easily do this with SVG :)
Also entirely agree on the background jsfiddle with the strange shape "X" with rounded corners, easier in CSS and a prime use case where it would degrade gracefully and not impact the page in any way.
We can rely on CSS variables to easily control the different values (colors, position, size, etc). With SVG most of the control is done with attributes and not all of them have CSS equivalent.
Every single item in SVG can be controlled so not sure what properties you mean here? You can add a class to an item and manipulate it (there is not a single inline style or attribute in the HTML of my old website, which would be near impossible to build in CSS if we are coming up with "SVG can't do that" vs "CSS can't do that" scenarios 😋).
You can translate, scale, change fill colour etc. with no issue. (I may have missed the point you were trying to make here as I am sure there are some things that are difficult).
You can easily add random content when dealing with CSS which is a great thing for accessibility
SVG is great for accessibility though (probably why I am more bothered about support than most as I still have to consider IE11 as a minimum due to 10%+ of screen reader users still using Internet Explorer because of compatibility with their screen reader).
I am also especially in favour of SVG as the preference over CSS as
<title>and<desc>provide a lot of baked in support for screen readers if an image has purpose (sadly content: <string> / <alt description> has poor support`. )For decorative only stuff CSS works fine, also for simple shapes it is great too.
if you don't like the padding trick we can still consider the use of CSS variables:
The CSS variable doesn't work for being responsive as it won't resize, so you would have to use some interesting
calcto make that work in a responsive fashion I presume (or usevwunits I suppose, but that seems messy). In comparison with SVG just set the width to 100% within a container and it will do all the magic for you as you resize the container, maintaining it's aspect ratio unless you tell it otherwise.or the new aspect-ratio property
aspect-ratiois going to be a game changer, but once again support is the big enemy at the moment. Why we didn't have that years ago is beyond me! I can't wait to be able to use it in production (which at the rate of roll out will hopefully be soon!)I have the same version as yours and I am also on Windows. We are probably facing a strange bug then.
I don’t have any plugins on Firefox so that is the only thing I can think of, maybe there is some strange rendering race conditions going on that a plugin inadvertently fixes?
Either that or display resolution, I’m running 4K monitors? I mean completely grabbing at straws here as same version and same OS should mean consistent results surely lol!
If we get into a position where we can’t even rely on version numbering for feature consistency then we are certainly doomed lol!
I don't know too but try the clip-path and background without the filter. Probably the issue is the filter. Try also outside codepen. Sometimes Codepen & co are buggy
Very healthy and informative debate there, I learned a couple of things from this.
Me too, that’s why I love conversations like this they challenge your perceptions of things you know (or think you know lol!)
I loved you old website @inhuofficial , I was looking for some inspirations for my website and this is great... Can I have a link for your current one please?
Not done yet, we go live in 2 weeks but the url is inhu.co if you want to bookmark it. 10th March is our launch date for the site (and the company!). If you want to drop me a message using the contact form on klu.io I will drop you over the designs as a sneak peak and a few others for inspiration if you want.
Thanks, I really appreciate that. I'll drop you a message :)