How to Support All Browsers with Your CSS
HTML-код
- Опубликовано: 21 окт 2024
- Providing browser support for all CSS is crucial to quality frontend web development. In addition to adding autoprefixers (manually or with tooling), you may need to reach for the Supports rule to target specific CSS properties.
🔗 Key Links 🔗
CodePen: codepen.io/Cod...
Autoprefixer: github.com/pos...
Supports rule docs: developer.mozi...
---------------------------------------
🌐 Connect With Me 🌐
Website: codinginpublic...
Blog: chrispenningto...
Twitter: / cpenned
Patreon: / coding_in_public
![Chino Pacas - Modo Capone (with Drake & Fuerza Regida) [Video Oficial]](http://i.ytimg.com/vi/zjv8TQ0gBkg/mqdefault.jpg)
It's a nice CSS feature for cross-browser support. Thanks for sharing Chris 🙏
You're welcome!
backdrop-filter: blur(6px); works on firefox
wondering whats your vs code theme.. it got a nice syntax highlighting though.
Thank you, Chris. Fantastic video (as all of them are lol)
Thanks for saying something ☺️
Dude, I have a problem with the margin-bottom. I happen to have some cards that I give a margin-bottom: 115px; but in safari it doesn't give me that margin, I tried to do what you mention in the video but it doesn't work. @support will this work for margin too?
Hmm…margin is fairly well supported. I'm thinking that's not your problem? Could it be that the margins are collapsing?
Thank you bro I really need it 😊😊👍
You’re welcome!
I have no idea why my code is working fine in Edge, Firefox, and Safari, but when I run it in Chrome, it doesn't work. Only the homepage is working correctly, but when I go to the dropdown files, they all lack CSS files, and the other links stop working. I also added custom "Next" and "Back" buttons, but they are not working. The only error I can understand is a non-js file, and I have no idea if there are any other errors.
Hmm. Not sure? If you post a link, I can try to take a look if I have time?
@@CodinginPublic "No problem, I've figured it out. The issue was that Chrome uses a different method for linking files compared to other browsers. For instance, while other browsers were able to load the file path using the full path (/project name/css/style.css), in Chrome, I had to use a different format (../../css/style.css) due to the project directory."
Use single dot . before starting url
Thanks for sharing!
You bet!
I'm using vivaldi as my browser how to see if a certain css property is supported on it?
It’s built on the Chromium engine if I remember correctly, so it should support most things that Chrome supports. I don’t think caniuse marks out Vivaldi though since it’s such a small market share.
@@CodinginPublicoh thank you so much for clarifying . it make sense now!
great!
Open this on IE11 and what happened 😇
😂 😂 😂
Personally, i run into way more problems with Firefox.
Used to be that Safari was always the problem child for me, but ever since Jen Simmons got there, it’s been advancing so quickly!
I having the same problem in Firefox 🥲
Did this help?
@@CodinginPublic no i didn't try this because u see i am having this problem while using tailwind css
Hmm. You can add autoprefixer and postcss-preset-env as PostCSS plug-ins. That should handle anything tailwind is using.