JSPM

css-browser

0.0.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 7
  • Score
    100M100P100Q23134F
  • License ISC

CSS Browser Selector is a very small javascript which empowers CSS selectors. <br />You can now write code for: browser, browser version, platform, platform version, device, device version. <br />Best part: no more hacks; all compliant code. <br />More info: [http://rafael.adm.br/css_browser_selector](http://rafael.adm.br/css_browser_selector) <br />beta/experimental versions: [https://github.com/verbatim/css_browser_selector/](https://github.com/verbatim/css_browser_selector/)

Package Exports

  • css-browser

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-browser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CSS Browser

A complete library for identifying browsers by css selectors

Add hosted js file to your web site application:

<script src="https://raw.githubusercontent.com/ceelsoin/css-browser/master/publish/lib/browser-selector-min.js"></script>

or add in your application with npm:

npm i css-browser

...or download complete libary:

https://github.com/ceelsoin/css-browser/archive/master.zip

Example

It's easy!

You are in:

mozilla/5.0 (windows nt 6.1; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/71.0.3578.98 safari/537.36

...and made it with this:

<style type="text/css"> .ie .example {  background-color: yellow } .ie7 .example {  background-color: orange } .gecko .example {  background-color: gray } .win.gecko .example {  background-color: red } .linux.gecko .example {  background-color: pink } .opera .example {  background-color: green } .konqueror .example {  background-color: blue } .safari .example {  background-color: black } .chrome .example {  background-color: cyan } .no_js { display: block } .has_js { display: none } .js .no_js { display: none }. js .has_js { display: block }</style>

Basically defining it should set according to:

  • Internet Explorer: Yellow
  • Internet Explorer 7: Orange
  • Gecko Engine on Windows (Firefox, Mozilla, Camino): Red
  • Gecko Engine on Linux (Firefox, Mozilla, Camino): Pink
  • Gecko Engine on Other OS (Firefox, Mozilla, Camino): Gray
  • Opera: Green
  • Konqueror: Blue
  • Safari: Black
  • Chrome: Cyan

Using

It's easy!

Set CSS attributes with the code of each browser/os you want to hack

  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mac.ie .mylink { font-weight: bold; }
.[os].[browser] .mylink { font-weight: bold; } /*without space between .[os] and .[browser]*/

Avaliable OS Codes [os]:

  • .win - Microsoft Windows (all versions)
  • .vista - Microsoft Windows Vista new
  • .linux - Linux (x11 and linux)
  • .mac - Mac OS
  • .freebsd - FreeBSD
  • .ipod - iPod Touch
  • .iphone - iPhone
  • .ipad - iPad new
  • .webtv - WebTV
  • .j2me - J2ME Devices (ex: Opera mini) changed from mobile to j2me
  • .blackberry - BlackBerry new
  • .android - Google Android new
  • .mobile - All mobile devices new

Avaliable Browser Codes [browser]

  • .ie - Internet Explorer (All versions)
  • .ie8 - Internet Explorer 8.x
  • .ie7 - Internet Explorer 7.x
  • .ie6 - Internet Explorer 6.x
  • .ie5 - Internet Explorer 5.x
  • .gecko - Mozilla, Firefox (all versions), Camino
  • .ff2 - Firefox 2
  • .ff3 - Firefox 3
  • .ff3_5 - Firefox 3.5
  • .ff3_6 - Firefox 3.6 new
  • .opera - Opera (All versions)
  • .opera8 - Opera 8.x
  • .opera9 - Opera 9.x
  • .opera10 - Opera 10.x
  • .konqueror - Konqueror
  • .webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • .safari3 - Safari 3.x
  • .chrome - Google Chrome
  • .iron - SRWare Iron

Extra codes:

  • .js - Will be available when js is enable, so you can show/hide some stuffs
Happy Hacking!

Made with <3 in Vila Isabel - RJ