Responsive Design by Browser & OS

Responsive design is unequivocally cool. But for the most part, it’s just a fancy way of reordering content based on screen size.

To provide a more tailored experience, try optimizing for multiple UI variables. CSS Browser Selector lets you style elements for particular browsers and operating systems using classes.

For example, let’s say your app is available as a Chrome extension, on Android, and for iOS. Prompt visitors to download the appropriate version by styling the .chrome, .ipad, .iphone, and .android classes. You’ll deliver a better user experience and cut down on visual clutter. Try my demo on a few different browsers/phones.

```css /* default styling for */ .store { content:url(‘def.png’); }

/* browser specific styling */ .chrome .store { content:url(‘chrome.png’); } .ipad, .iphone .store { content:url(‘ios.png’); } .android .store { content:url(‘android.png’); } .win .store { content:url(‘win.png’); } ```

Cool right? Well, here’s the bad news: the author, Rafael Lima, is no longer maintaining this project, and the experimental fork has languished too.

It’d be a pity for this project to end, so please fork it and contribute!

Get CSS Browser Selector Discuss it
2017 Neal Shyam