DEV Community

Stefan Đokić
Stefan Đokić

Posted on

How do you style your web-apps to work on all browsers?

Frontend and/or fullstack devs, how does your workflow look like when you're designing a web-app that should look and feel the same across all modern browsers?

I've been working on a project for 3 months with focusing only on Google Chrome and Chrome-based browsers (such as Min Browser, Vivaldi, etc.), and the list of bugs present on Firefox, Edge, and Safari are stacking up insanely 😂

Looking forward to your responses!

Top comments (2)

Collapse
 
rhymes profile image
rhymes

how does your workflow look like when you're designing a web-app that should look and feel the same across all modern browsers

You shouldn't, that's not the point of modern web development or progressive enhancement. The idea of chasing a pixel perfect website that looks exactly the same on each and every browser on each and every platform will only drive you mad.

The point, in my opinion, is to use modern web standards, helped with resources like caniuse.com and maybe a CSS framework to make it so that the app is usable everywhere, not that it looks and feels the same everywhere.

People with 2G on a 5 inch screen shouldn't have the same user experience of people with fiber optics on a 30" inch screen :)

I've been working on a project for 3 months with focusing only on Google Chrome and Chrome-based browsers (such as Min Browser, Vivaldi, etc.), and the list of bugs present on Firefox, Edge, and Safari are stacking up insanely

Well, some people could argue that Chrome is the new IE, not in the sense of being the worst option like back in the days but because of the vendor lockin. Chrome is a really good browser but it contains many features you won't find in other browsers, if you only design for Chrome, then your website will likely have some "Chrome only" behaviors. My suggestion is to keep an eye on what's Chrome only and what's not and try to avoid the former. Or design around it (like using feature detection)

It's not impossible to design a cross browser website, it just needs testing (preferably since the beginning of the app) and dedication. Maybe the issues you're encountering are due to the fact that you spent three months focused only on Chrome.

Good luck!

Collapse
 
richjdsmith profile image
Rich Smith

Chrome is the new IE

Totally is. And that's terrifying with the amount of user share it has.

On a different note, Here's my favorite metaphor to explain Chrome and Firefox.

So, imagine you have two cars to chose from.

The first car, called Chrome, is really cool - it's quick, it's nice, it's reliable, it's comfortable. There's just one thing.

There's a guy on the back seat. He's always there. He writes down wherever you're going. When you go shopping, he makes a copy of the receipt. When you drive with someone, he listens to the conversation and makes notes. Which addresses are you visiting? And how long time do you stay there? And when you make a phone call, he listens and makes notes.

He then keeps this information forever, and sells it to various people and companies. They study you, like a bug, to see what makes you tick. So they know what you like and what you want, and what you're afraid of and where are you in life and so on. So they can manipulate you better into not just buying shit, maybe, but maybe to do more sinister stuff, like manipulate elections.

Of course, the Chrome car makers own some of the important roads, and they make them hard to use in other cars, because they want this dude watching you.

Then there's the Firefox car. It might not be as comfortable or as quick. I think it is, but different people have different experience. But either way, there's no dude making notes. In fact, when there are dudes making notes by the side of the road, the car tries to hide you and protect you!

Or you can use the Safari car, if you get the more expensive garage I guess, whatever.

Why the fuck would anyone use the Chrome car.