What is CSS prefix, and why you need it in your development? Find out in this tutorial how to use it properly and forget about cross-browser inconsistency!
► Get Filip a coffee so he can work longer at night :)
[ Ссылка ]
► LET'S CONNECT:
Facebook: [ Ссылка ]
Linkedin: [ Ссылка ]
Project Resources:
[ Ссылка ]
Tools:
Should I prefix?
[ Ссылка ]
Brackets, FREE code editor
[ Ссылка ]
Emmet, super speed coding addon
[ Ссылка ]
Beautify, turning your ugly code into beautiful script
[ Ссылка ]
Transcription:
Welcome to another tutorial. This is about CSS prefixes and why it matter. So, CSS prefix is the vendor prefix our way for browser makers to add support for new CSS features before those features are fully supported in all browsers. This means that we need to add these prefixes, so our CSS can work on all the browsers. Our prefixes are for different browsers are different a different name. For example, I have prepared some image prefixes as you can see for Mozilla is a moz for opera is o and for Internet Explorer is MS and so on. And don't think that these thing is some sort of hack because it's just a temporary solution until browser manufacturers make up their minds and save us from prefix annoyance. For example, to show you how prefix works let's let's add some prefix on our image here on our vendor specific properties. Let's add to our main CSS to our image image tag let's add border, it's a 20 pixels solid red, and we have our border. Not so long ago to have border radius, we were forced to use vendor prefixes, and it was something like this: if we wanted to add the border border radius we need to write this, and and it's a pretty, pretty ugly, with so much code. Today, the browsers make up their minds and the make, make does prefixes obsoleted, border radius prefixe are obsolete so we can just write just like this. And as you can see it it works, it works. And that that's it about the prefixes. Okay, to make our life easier we have a nice website called shouldiprefix so you can check that site and check your CSS and see if you need some prefixes. For example, box reflection need prefixes, and you can see right there on the right side use prefixes, for example, max-height use no prefixes so don't use does prefixes. And that's it we will wait for another day to see a better day without prefixes and all these cluttered code, and to make better websites we cleaner code. Thank you for watching my video I hope it help you and see you next time bye-bye.
