Dealing with Cross Browser Compatibility
HTML-код
- Опубликовано: 3 авг 2024
- Cross browser compatibility can be a pain in the ass, but some people take it too far (at least in my opinion). In this video, I take a look at:
- some of the differences between browsers user agent styles
- how to check for browser support for CSS properties and values
- why your site doesn't have to look the same on all browsers
- the concept of progressive enhancement
- feature queries ( @supports )
- polyfills and PostCSS
//// Links
Font Weights: codepen.io/kevinpowell/pen/4f...
Centered List: codepen.io/kevinpowell/pen/9e...
Button with unset: codepen.io/kevinpowell/pen/f1...
Feature Query: codepen.io/kevinpowell/pen/0d...
caniuse: caniuse.com
mdn: developer.mozilla.org/
Lea Verou's conic gradient polyfill: leaverou.github.io/conic-grad...
PostCSS: postcss.org/
Facundo Corrandini - / fcorradini
and his CSS Trick article I mentioned - css-tricks.com/switch-font-co...
I'd love to know what your opinion is on all this, so leave a comment down below to share your experience, issues you've run into, or opinion on everything I said!
--
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powellom/Kev...
![Cross Browser Testing - Ultimate Guide (Start to Finish) [With Checklist]](/img/1.gif)
I think a reasonable approach is: "It should look great in the latest Firefox and Chrome, and it should be usable in IE 10, even if it looks a bit rough."
The effort to make it look great in every browser that ever existed is pointless. If a customer insists on that, charge them triple the price.
Thanks for summing up my 30 minute video in 2 sentences 😂
I agree almost with that you say yet IE 10! NEVER, as it was the worse browser by MS. I would say IE 11 only. Cater for the majority and not the minority, it will speed up the demise of IE completely.
If a client insists on that, I fire them.
People are worried about IE but not Lynx? (jk)
Safari... Fucking iPhones.
Liked for the thumbnail
Haha, thanks. A little click baity, but I couldn't resist 😂
Thumbnail is Dope...
😂😍😍
hE IS MINE, BaCK OfF
When I first started web development, our boss insisted we had to support back to IE4 and the sites had to look pretty much identical in all browsers. We'd have to support at least three different major versions of IE, all with their unique quirks. Oh the fun of adding multiple containing divs just to fix some basic alignment. Things feel much simpler now.
That sounds terrible, but it also sounds right for the times. Pixel perfection and all that was pretty common for a long time. Very nice that we've moved past it, and even the crappy browsers these days are a big improvement from what we used to have to deal with. IE4... I honestly don't even remember what that was like, lol. IE8 was bad enough.
0:52 "But before you run away..."
- said Kevin when unsuspecting me just ran away to the kitchen to check up on the cooking disaster.
Wow, a timing.
This death row inmate (IE Explorer) already suffered a lot. It's victims are suffering with it. I think it's time to set it's execution date and stop all this sufferings. BTW Great discussion Kevin like always. Very thoughtful and mature insight with very valid arguments.
Adapt what is useful, reject what is useless, and add what is specifically your own.
Bruce Lee
Excellent lecture, Kevin! I wasn't intending to watch the whole video but it was so intriguing I stayed to the end and was so glad I did. Your videos are terrific and I watch one or more almost every day. Keep up the good work!
So glad to hear that you enjoyed it!
Very informative and to the point Kevin! Absolutely agree with you, since it’s almost impossible to make it perfect for each browser.
This is an exceptionally good video as it contains some very important core facts we should be aware of before we start to write the code; well done Kevin.
Very informative, Kevin. Keep up with the quality content!
Thanks Julio :)
If the internet was a group project IE is that one group member that slacks off and barely does enough to be a team player lol..
Haha, had to like this video just for the thumbnail, honestly portrays my feelings towards IE xD Cheers Kevin! Doin' great as always!!
Your thumbnails are always spot on hahaha.
Awesome Kevin, I agree with your thoughts and I do have the same.
Recent subscriber here. You are right on the money. I coded my first web page in early 1996 before we even had CSS. Ever since then I have always stuck to my 3 point design principle. 1, Content, without adequate content a site is of little value. 2, Ease of navigation. If the visitor can't find it, even adequate content is of little value. And way down the line of importance, 3, Make it pretty. Too many sites these days put #3 at the top of the list and forget 1 and 2 entirely. I've always coded my sites in such a way to avoid using any fancy or gimmicky thing if the usability of the site requires that thing to work. Use the fancy things to make it look pretty, not to make the site work. BTW less than .5% of the visitors to my personal site still use IE, so few that IE doesn't even show up in my top 50 browser list anymore.
I probabably made my first page very close to then, probably in the 1996-1998 range. Back then for me it was all about slicing up a PSD 😁. Luckily IE is slowly fading out, I just wish MS would stop including it with Windows. They have a much better browser now, I don't understand how they don't force people to be on it. I don't think many people who are using IE are on Windows 10, but still...
@@KevinPowell There are a few large large companies and a couple of government agencies that are still using some old applications that require IE. That's why MS is still including it. The National Park Service has one dealing with financing that they are still using. I think they are trying to update it. I got my start in HTML as a volunteer building the National Park Service's first web page for a Park.
I appreciate the insight that some people don't have a browser choice. I hadn't considered that before.
The cover image is priceless.
I must say, when it comes down to browser compatibility we see eye to eye. Great video 👍
I had this exact problem at my work. We develop sites for Chrome and I saw your video where I learned about aspect-ratio. I used it in my work and boss came to me and said some pictures aren't displaying correctly. After some debugging I found out that boss is using Safari and he wants our sites to work in Safari also. So I had to rework that site without aspect-ratio and it just felt wrong :D
I totally agree Kevin. There are games I really want to play but my graphics card doesn't support them or I don't have enough RAM. Does that mean game devs should stop making super awesome games with 4k graphics? No, it means I need to upgrade my gaming rig. The same goes for browsers, if you aren't tech savvy enough to realise that there are other browsers besides IE then you probably won't even know notice what you are missing out on. If you are then go and download Firefox or Chrome.
While I totally agree with you, people seem to not realize why companies want IE support. It's not because people that use IE want everything chrome has but don't want to switch so just to please them. It's because many people still use it that don't even know about chrome or firefox or whatever, let alone know what grid is and why it doesn't work.. So when those people go on amazon for example and the page is falling appart, they don't know that IE is the problem, they don't know better, they will think how amazon has bugs, they are unprofessional and so on. Amazon supports IE for their own sake, same with every other company.. Amazon is maybe a bad example since it's a well known company but you get the point.. Even you who know about all those cross browser crap, if you go on Amazon in IE and it breaks down, you'll think oh my god what a bunch of *****.. Billions and billions of dollars and look at this.. The only solution is to Microsoft get rid of IE and work on Edge a bit more and getting a standardization in browsers for javascript engines and css support.. even vendor prefixes for safari and firefox are getting on my nerves.. Even ES6 isn't supported in IE.. I mean it's 2020. and I have to write ancient javascript.. That's messed up and I don't know how they didn't standardize all that to this day.. That's not just the looks, that's massive security flaws that everyone knows about and it's just fuck 'em we don't care, we still making mOneEy
At first I hated Internet Explorer for the difficulties it presented but, as I was solving each of the problems, I began to enjoy the successes as if I had knocked out Muhammad Ali or touched the rear part of Queen Elizabeth II (I have a fixation with the big ships). Seriously speaking, the learning curve was short and fast. I think I got the right attitude, which is not usual in me (ask my family).
Since then, I consider adapting a design for full compatibility with Internet Explorer as an extra item in the quotes I give to clients.
Now I'm going to watch this video. ;)
Cheers.
same here about muhammad ali .. :) :) :)
Thank You!!! :)
Best thumbnail ever.
Thank you for an insightful talk. I read somewhere thought that it is better to avoid polyfills and go with the @support instead. Shouldn't we strive for very dry CSS?
I'd use @support first, but if you *need* something to work (custom properties might be essential for something), then a polyfill might be required. Keeping CSS dry is while writing it, and just not repeating yourself, if the output CSS by a polyfill leads to some repitition to make things work, then I'd say it's all good. Just means you need it for that to work, and it's not you actually writing a ton of extra CSS for nothing. Good polyfills mixed with modenizr won't even run if the browser does support it too.
Great video, worth every single minute!
Thanks! And thanks for your help with it!
@@KevinPowell glad to help :)
Liked it even before watching for the epic thumbnail
Great video as always
I liked the video before I even started watching it because of the thumbnail.
@Kevin Powell, Great stuff! Just some feedback take it or leave it, can you super impose your logo in the top right of the screen with abit of padding for your future videos and use the same background colour as the logo screen? This is hard to explain but I feel like your intro sound beeps are incomplete sounding, can you add 3 slightly faster speed descending notes to it with the last having abit more punch?
The logo has to be in the bottom right, that's where RUclips puts it. As for the sounds, I'm not much of a sound person. I like the idea, but I'd have no idea how to do it! I'll probably be making a small change to the intro for the new year anyway though, with a new animation... so with that would probably come new audio. If I get around to it that is.
@@KevinPowell "logo has to be in the bottom right, that's where RUclips puts it", I don't understand, I mean in the background of your video which has a background color of RGB (38, 37, 38). Anyways really enjoy your videos, keep em' coming!
Oh, I misunderstood, sorry. I could give that a try. I think I had issues with putting it as a light BG for some reason but I'll try again 😁
Broo I love how you actually look like browser compatibility beat you up 😆
Thumbnail is accurate of real life.
I have to admit that I never thought of it this way.
What you said makes a lot of sense and for my own stuff, not work stuff because they are anal, I'll feel better about using newer CSS effects.
I've been a fan for awhile now. The thumbnail for this vid pushed that to SUPER FAN. As an IT practicioner for 30 plus years and having lived with (painfully in a work mode) Microsoft's CRAP in more way's than can be counted?
I don't care about internet explorer. Less than don't care.
Re your statements? They show you are a consumate gentleman Mr. Powell and I applaud it. However, I'll add, and yeah this is what, four years later but still relevant I believe... I'll add, the group left using this, for whatever reason, are real however, think about demographic of what your site is targeting as well I'd say. Who is your audience? Given that, I'd say an icon/image/banner or two that says something like "Works best with Chrome" I'd think would also go a long way. Per your point, as the dev, I believe it's your job to ensure everything "works" but at the end of the day?
I don't care about internet explore, funny, I was a Netscape guy and / OR ANYTHING besides a Microsoft guy. The practices that Microsoft has regularly employed over the years negatively impaacted more people than can be counted and they did these things (often they were not "questionable" in nature they were downright predatorial) without ANY regard for the rest of, not only the user base, but the world at large. It was, beautiful for me, as someone who has worked through all that when a product like Apache went stellar, frankly when anyone WON any small battle with the juggernaut they became.
Lastly, it was even more enjoyable in mobile when IOS and Android became what they became while the whole Windows Phone world fell flat on it's face. Yeah, I know, it's a David and Goaliath thing. However, I think the beauty of open free market capitalism is when one companies success is then followed by a thousand companies success. Not one, and one only.
/end diatribe
My approach is simple: code it to meet expectations. If you need to support ie11 and edge etc then you do that. If you only need to worry about chrome them just worry about chrome
great points in this. I feel the amount of work you put into browser compatibility is highly dependent on the target audience of your site. Why put in a bunch of work to make a site work for IE if there aren't a lot of people visiting the site with that browser? Like you said, it just needs to be functional. Also, target audience dictates what CSS features you actually put in the website. For example, if you're building a website that targets an older audience, they likely won't care about the newer fancy features that CSS offers as much as a website that would be targeting a younger audience.
100%! If 25% of my audience uses IE, then I'll make sure it works great there. If it's 1%, I'll make it work on a basic level.
Kevin, I have an interesting question. How is it possible that a website has a small cookie consent container with max-width of 22 rem but on Safari browser those same rem are rendered as smaller width? I don't know if this matters but the website uses media queries in rem. The problem here is that the container cuts off a part of the content inside of it, but only on Safari.
Watch out for z-index flattening in PostCSS/NanoCSS. At work, I had a weird bug that didn't flatten all the z-indexes after inheriting from an old theme's styles I had to overwrite. It took us ages to figure out it was PostCSS/NanoCSS. Don't worry though, can disable that feature.
Never heard of that before, thanks for bringing it up
What a difference 4 years makes. IE is no longer supported, and you can just say "IE isn't supported anymore." If companies really have to use it for some legacy app (which should be rewritten), then turn on IE emulation on Edge and call it a day. Likewise, Edge has moved to the Chromium engine so... it's pretty much Chrome. Develop in Chrome or Edge, test in Firefox and a sanity check in Chrome/Edge and Safari.
I cbf to worry for long about old browsers. As long as the text is readable, I'm not going to stress over visual issues. That goes for things a lot bigger than just having a funky border. As long as everything can be read and accessed, that's the end of the testing unless there's at least a good 10% of users on it.
I think CSS grid is still really sketchy to use though. Unless you have a very finite number of items, the way that's supported in IE is going to make the content useless by overlapping everything. The CSS you have to write to fix this only works if you have a finite number of items, and takes a while to write for me because trying to line things up with numbers like that just messes with my head. Learned this on my last project and not sure if I'm going to continue using grid except in very straightforward situations.
You can create custom css style-sheets for internet explorer using the tag I think inter browser compatibility is improving a lot thanks to the W3C standards for modern web rendering.
The biggest issue now, I think is IE10. Microsoft still includes it with Windows, but they aren't updating it anymore and it's missing support for some key things.
@@KevinPowell The biggest problem with IE10 is that a lot of businesses still depend on it to serve their intranet legacy web applications such as CMS or accounting. Of course, it's only a matter of time before Microsoft discontinue support for Windows 7 and Internet Explorer and just forces everyone to use Windows 10 and Edge however I'm sure they'll give plenty of warning and most businesses will adapt anyway. Edge is not as bad as IE
just by watching the anti-internet explorer thumbnail i was unable to not click at all
it's gotta be 100% *perfect* and *exact* across all browsers! lol j/k
in all seriousness, though, MS ought to get onboard with the "standards". it's still VERY annoying to have to write special code JUST for IE/Edge. Stupid "Edge" cases!
I get why newer features differ in implementation, but the small unnecessary differences annoy me.
Also Internet Explorer, that's all I need to say.
Telephone rings, you answer. Client talks about the requirement that it must work on all major browsers and devices.
YOU: That's pointless, sir.
CLIENT: This is Kim Jung Un. Make it work or you end up in Gulag... cemetery. You have two weeks.
YOU: Yes sir, that could be done in a month but I didn't say it's impossible sir. One month is possible sir.
CLIENT: One month sure but you nevertheless you will end up in Gulag...alive.
Like if the Caption Made you Grin 😏.
I have had trouble with touch events on iPhone and I guess Safari devices. Anyone know what the workaround is for this? These links work just fine on other browsers and other devices.
Keep going
my stuff isnt working in Chrome, its not a webpage but more so a tool for work to navigate folders and files. How can i fix this to make it work over all platforms correctly
is there a website compiling all the cross-browser tricks or hacks? It would be pretty convenient if there's one.
If there is one I don't know about it. There must be one though. If I find one, or if someone comments about one, I'll add it to the description links :)
Epic thumbnail 😂
‘I only design for internet explorer’ is basically the Amish equivalent of web devs
video was too long but it was useful❣
@Kevin Powell,
i recently developed a screen for invoice app with flexbox. i was seeing the screen on Firefox but it sucks big time in chrome. i think this is called as intervention but not a bug. my 4 column flexbox invoice header broke into 1 column on chrome browser. I am in the process of investigating on why. that's how i got your video..
That's interesting... I don't know about any big issues with Chrome and flexbox currently. Very strange 🤔
Hi @@KevinPowell,
Many thanks for your kind reply. The intervention thing is a old issue. I found out that the layout broke if use
How do i write and IF statement to stop opacity or even remove something in IE but leave it in for Chrome?
You could use feature queries. I made a video on them here - ruclips.net/video/wPI8CEoheSk/видео.html
Thank you
What is about modernizr and HTML5shiv?
2,5 years further and Safari is still not deprecated. Really disappointing.
See, mobile traffic is around 60% today. How can we overlook Samsung or other major developer browsers?
You shouldn't! But do be aware of how many people use them. The biggest issue tends to be Safari (which is all browsers on iOS, which have to use webkit). But again, a lot of things can degrade gracefully, and for the most part, Samsung and all the other browsers are pretty good at keeping up.
The only problem here seems stillt to be if the customer says it has to look the same on every browser, because they don‘t know about the crossbrowser nightmare... any answers for them?^^
You're the professional, you tell them the reality of the situation :). Nicely, of course, and in a way that positions it in a positive way (that costs them less money can help too, lol). Bring up my example of things looking different on a cell phone and a desktop, and ask why that's okay that they aren't identical, even though it's the same user.
It's about bringing the same experience, or a similar experience. And yes, it *needs* to work for everyone. But work isn't the same as be 100% identical. This is a nice article that might give you some ammunition rachelandrew.co.uk/archives/2017/07/04/is-it-really-safe-to-start-using-css-grid-layout/
You can also talk about competitors using things like grid, or that they will soon, which enable them to have more modern looking websites. They don't want to fall behind their competition :).
Of course, it also depends who their market is. Do 30% of their visitors use IE? Well that's a different story than if 2% do.
Also, you can point them to actual companies using Grid. This is great read - julian.is/article/css-grid-at-scale/
@@KevinPowell Wow, thanks for taking so much time! Your example with the cell phone actually went straight to my list after watching the video :D. I will check out all articles as well.
When will someone step in and clean up the internet mess.
I´ve tryed:
.myClass {
@supports (mix-blend-mode: screen){
mix-blend-mode: screen;
@supports not(mix-blend-mode: screen){
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
but it not work on chrome, what did I do wrong?
If you want to use `not`, make sure there is a space before the brackets.
Also, are you using SCSS? If not, you'd want the @supports on the outside, and then the selector on the inside, like a media query.
It works, thanks
Anytime!
18:50 some US govt sites wont let you use some of the features with anything but IE and chrome.
Great video! It is 2022 when I write this comment. IE hypothetical death is near as Microsoft announce that IE will not get any support in the future.
Any good news for upcoming vds ?
What type of good news?
It's not _we_ who should be dealing with it - it's the people who make those browsers. There should be some conformance tests that a browser have to pass in order to be called a web browser. What's the point of having web standards if they can be violated or unsupported without any consequence? By making workarounds, we're perpetuating the vicious circle.
Moreover, it should be us - web developers - who decide how those standards should look like, not W3C that mostly consists of the very corporations who develop those browsers, and who use those standards majorly to destroy their competition, not to make our lives easier and the Web a better place.
Why dont they all just work together??
hoooold on! Who says, that IE users want to see the beauty and fancy of modern web-techniques in the world wide web? Think about it, is anyone driving an old ugly car to a beauty contest? Of course, but they dont know what and why they do that. If my focus is on good web-expierience, then i use a modern browser. Never forget... First thing: Every surfing human looks for information, not animation!
Big fan. I think you forgot to link to caniuse.com.
Totally did, thanks for catching that :)
Kevin Powell Don't forget Modernizr.js
IE -> Opera Mini
At least today IE isn't large and/or secure enough to be bothered with.
Sir big fan of u
Please reply i commented first
I'll reply, even if you don't have the first comment :)
Do you know of any books on this topic?
On this specifically, I don't actually :\
I just came here to say that other youtubers can stop making thumbnails for their videos, because none of them will ever be remotely close to being a great as this one.
I just hope there is only one browser... Yes, chrome is enough...
I 100% disagree. We ran into so many problems because IE was so dominant. Once a browser has market control, things stagnate and they can dictate the direction of everything (it's because of IE we didn't get to XML, which maybe was a good thing in the end, but still, it had been agreed that was the direction and IE basically said nope). I wouldn't trust Google to decide on the future of how everything should work.
You should change the thumbnail to firefox.
Why can't we all build it and if they don't use the correct browsers (ie not Explorer) to protest? If everyone who uses Explorer sees a crappy mobile experience on a big screen for a lot of sites, they will notice and google what is going on. Then we will see change browsers. We can't just keep complaining about it forever, something has to be done!!! WHO I WITH ME???
OMG optimized for chrome?? Let's do it!! Tell your boss, YES YOU CAN!! The elderly have grandkids who will do it!
One issue is many people who use IE can't change. Many companies lock computers down, no upgrading, no installing software. They're still on Windows XP and Windows 7.
Also, other people are non-tech savvy. IE might only be 1.5% of people or so today, but it's generally not because they want to. Also Safari is kind of becoming the new IE.
You sound like Jerry from Rick & Morty
That's the first time someone says that one... I hope that's a good thing, lol :)
Yes, it is tempting to punish IE user with a basic design, but experienced designer should be capable to create a decent IE alternative design and serve it up in a separate CSS so other capable browser don't have to deal with IE nonsense. I don't think the all User have to have the same experience across all browsers, but I do think, that any visitor is a potential promoter, customer or friend so why offend this user with less than the best his browser can provide. So optimize as best as possible and do the extra work. Usually this extra work is not that unreasonable. It may look different but it should still convey the color scheme and pleasant proportions and be accessible throughout.
I always tell my clients that I am creating for the future. IE 11 is not part of it.
22:00
internet explorer is dead so i dont need to worry about the IE
I dropped IE years ago. It's a dumpster fire and a waste of my time.
Poor ie in thumbnail
Just had a look at your website in IE. I am please to see that is still is usable as this means most of my projects should also still be functional in IE (as I have not checked).
As a side note: please stop using a green screen background for your videos - it is very distracting!
Is it? I don't have a different background (other than a bunch of kids toys) that I can use at the moment :\.
I tested it in IE11 and it worked well enough.
vicious circle... it's kinda necessary but it's also pointless work for programmers. we can't stop preparing content for all the browsers, but the way we code websites doesn't make this browsers to change at all. if internet explorer knows that we will prepare suitable content for their shitty browser, they doesnt have to fix anything to make our life easier. people who create content will try to suit it for all the customers, cause it gives more profit for the company that needs the website etc... but imagine what would happen if we all said "STOP" and just didnt care at all. technology goes forward and this behaviour stops it a bit :D if almost no website would work appropriately in 5 years on explorer etc - no one would just use it and even companies would have to update or change browser. the same stuff is with TV. New TV doesnt have EURO plug and samsung doesnt care about pegasus users - just change the console mate if u wanna play something, its 2018 :D :D just joking a bit but im nervous AF when i code something and then i look into it from old safari or IE
IE isn't even supported anymore, Microsoft has moved development over to Edge. The big problem is that they still include it with Windows, which is really dumb. I'm guessing that won't continue, but man it's annoying. I do think most people that use IE are on old, out of date systems though (though I have no data to back that up). It's easy to say a company should upgrade their computers, but when they are running WindowsNT still (released 25 years ago...), not supporting their browser isn't going to make them do it sadly.
I do agree though, and unless for some reason you have a lot of users on older or crappy browsers, I really don't think we should be wasting our time in giving them a perfect experience. Make it work in a simple way and move on.
@@KevinPowell but im still curious why as big company as microsoft created so bad browser. i bought new laptop yesterday and when i opened mobile first menu code (the one you created for a portfolio website on your channel) it didn't even show cause it was on grid and my landing page was completely without navbar. how is it possible for so great company to release something as terrible as IE and Edge. It is technological company but their browser is treated like a big joke and the whole informatical enviroment doesn't even wanna listen about IE and Edge. I've never seen anyone pro in my life that used IE. Even now, when microsoft include Edge, everyone uses itonly to instal chrome or firefox :D
Edge isn't bad, and it's improving quickly. Their team on it is a bit small. I do see your point though. Part of the problem was they dominated the market for so long they didn't need to make it better. Now they seem at least a little interested in doing a good job, but they aren't pushing super hard on it either.
Can't or won't?
If they're at work, they should be working, not surfing the web.
@supprots(@supports) {
......
}
The answer for me is simple: I'm not gonna support, because my website is intended to run on modern browsers
Please speak in hindi.
IE 11 is a pathetic browser.
Your facial expression is 90% of time like you're guilty or sad. Please work on that, because it's very irritating. All the best :))