CSS selectors designated for specific device or browser
CSS interpretation often differs between browsers and devices (iPad, Android…). It is sometimes required to detect particular client environment and apply special version of styles. One obvious way is to use JavaScript and apply all fixes when page is rendered. JavaScript method is not preferred due to performance & debugging problems. Another option is to use CSS selectors. During rendering agility append to html element on page custom attributes, which describe client device and client browser.
<!DOCTYPE html> <html id="htmlRoot" data-device="Desktop" data-browser="Firefox-47.0"> <HEAD><title> Equipment List </title> …
Both attributes (data-device & data-browser) are grabbed from UserAgent string provided by each browser during request. Attributes:
- data-device
- Describe hardware device on which agility is opened. Possible values are: Desktop, iPad, Android, iPhone, WindowsPhone.
- data-browser
- Describe browser and its version.
Above attributes itself means nothing during page rendering. But they allow to define class selectors for particular devices. CSS sample:
html[data-device= "iPad"] div { border: solid 1px black; }
In above example each div element will contain black border but only when opened from iPad device. Sample with browser:
html[data-browser^="IE-8."] div { border: solid 1px black; }
Above example style will be applied only for Internet Explorer 8 (precisely for any browser which name starts with "IE-8.").
User Agent string is not always reflecting real browser or device. Client browser can fake UserAgent string. For example latest windows phone introduce its browser as Chrome executed on Android device. There is no general rule which method (javascript or CSS selectors) should be used, it depend on particular issue.
