• Stars
    star
    626
  • Rank 71,755 (Top 2 %)
  • Language
    JavaScript
  • Created over 16 years ago
  • Updated over 12 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A very small javascript library that allows you to create browser specific CSS to be merged into your normal classes. No more hacks or mischievous code in your CSS code.

CSS Browser Selector

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

Identifies
browsers: Firefox; IE; Opera; Safari; Chrome, Konqueror, Iron
browser versions: (most importantly: ie6, ie7, ie8, ie9)
rendering engines: Webkit; Mozilla; Gecko
platforms/OSes: Mac; Win: Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11
devices: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; J2me; RIM Playbook; mobile (generic)
enabled technology: JS (use in conjunction with <html class="no-js"> for even more granular control)
language detection

Recent contributors to 0.5, 0.6:

more detailed IE detection:
https://github.com/kevingessner/css_browser_selector/

more detailed WIN detection:
https://github.com/saar/css_browser_selector

no-js to js:
paul irish: http://paulirish.com/2009/avoiding-the-fouc-v3/

mac versioning
https://github.com/haraldmartin/css_browser_selector

v0.6.1 2012-03-14
iOS version detection
beta: detect if being run in iPad app.
(from: http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript)

v0.6.0 2012-01-24
more detailed support for Opera, Chrome, Safari (and revised support for Firefox)
versioning for Chrome, Blackberry, Android, Mac
Android device detection
altered how 'mobile' is deterimed to be added to the class string
language detection
RIM Playbook added
continuously evaluates browser max width (in case of resizing)
continuously evaluates browser orientation (portrait vs. landscape)

v0.5.0 2011-08-24
any version of Firefox
more versions of Windows (Win8 [tentative], Win7, Vista, XP, Win2k)
more versions of IE under unique conditions
if "no-js" in HTML class: removes and replaces with "js" (<html class="no-js">)

resources:

navigator.userAgent strings:
http://en.wikipedia.org/wiki/User_agent
http://www.useragentstring.com/pages/useragentstring.php
http://www.user-agents.org
http://www.zytrax.com/tech/web/mobile_ids.html

history of the user agent string:
http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/

language list:
http://msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx

windows nt list
http://en.wikipedia.org/wiki/Windows_NT

blackberry user agent string interpertation:
http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-detect-the-BlackBerry-Browser/ta-p/559862

javascript compression:
http://minifyjavascript.com

screen resolutions:
http://cartoonized.net/cellphone-screen-resolution.php

aspect ratio:
http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

iOS detection?:
http://stackoverflow.com/questions/4460205/detect-ipad-iphone-webview-via-javascript

OTHER VERSIONS

Ruby on Rails Plugin by Reid MacDonald
http://latimes.rubyforge.org/svn/plugins/css_browser_selector/

PHP CSS Browser Selector by Bastian Allgeier
http://bastian-allgeier.de/css_browser_selector/

Wordpress Plugin by Adrian hanft
http://wordpress.org/extend/plugins/browser-specific-css/

EXAMPLE

<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; }
    .webkit .example { background-color: black; }
    .chrome .example { background-color: cyan; }
    .example { width: 100px; height: 100px; }
    .no-js, .no_js, .nojs { display: block; }
    .js { display: none; }
</style>

License:
http://creativecommons.org/licenses/by/2.5/

ORIGINAL AUTHOR: Rafael Lima:
http://rafael.adm.br

Based on idea by 37signals:
http://37signals.com/svn/archives2/browser_selectors_in_css.php

Contributors:
Niyaz (http://github.com/niyazpk)
Marcio Trindade (http://github.com/marciotrindade)
rbottarelli (http://github.com/rbottarelli)
Bryan Chow (http://github.com/bryanchow)
Derek Lio (http://github.com/dereklio)
Paul Irish (http://github.com/paulirish)
Preston Badeer
Upekshapriya
André Lopes
Tazio Mirandola - copiaincolla pubblicità
Reid MacDonald (http://geminstallthat.wordpress.com)
Vinicius Braga (http://viniciusbraga.com)
Chris Preece (http://www.mmtdigital.co.uk)
Dominykas
M@ McCray
Daniel Westermann-Clark
Steve Clay (http://mrclay.org/)
Jeff Bellsey
Jean Pierre
Micah Snyder
Derek (http://amphibian.info)
Jesse Scott
Moises Kirsch (http://www.moiblog.com/)
Alex Wiltschko
Chris Warren and Tony Nelson (http://www.imagetrend.com)
glasser

More Repositories

1

tabs_helper

Ruby on Rails helper for tabbed interface
Ruby
11
star
2

mautic-tags-import

Ruby script to add tags to contacts on Mautic via CSV file
Ruby
7
star
3

minimal-dsl-example

This is just a few lines of code demonstrating the basic of a DSL implemented in Ruby
Ruby
5
star
4

heroku-buildpack-wkhtmltopdf

Heroku buildpack for wkhtmltopdf 0.12.1 to cedar-14
Shell
4
star
5

dbdesigner_generators

This gem generates ActiveRecord Migration files from a DB Designer 4 xml file
Ruby
4
star
6

simple_datepicker_helper

Ruby on Rails helper for Eulerian Javascript Datepicker
Ruby
4
star
7

simpletest-gnome-notify

Automatic notifications of tests written in Simpletest on Gnome Desktop
PHP
4
star
8

myfinance-santander

Script para importar o arquivo de extrato em formato Excel do Santander para o MyFinance
Ruby
3
star
9

postgresql_migrations

This gem implements add_foreign_key and remove_foreign_key for PostgreSQLAdapter.
Ruby
2
star
10

novofixo

Site novocel e novofixo
Ruby
2
star
11

DEVProtocol-Brazil

Esse repositório tem o propósito de organizar a criação da comunidade brasileira do DEV Protocol
2
star
12

aprovafacil-ruby

Ruby Wrapper for AprovaFacil
Ruby
1
star
13

rafaelp.github.com

Meu blog pessoal
HTML
1
star
14

mundipagg-ruby

Ruby Wrapper for MundiPagg
Ruby
1
star
15

kayako-update-key

This script update key.php file used by Kayako Support Suite from Kayako Members Area.
PHP
1
star
16

interfax-ruby

Ruby Gem to Interfax.net SOAP API
Ruby
1
star
17

myfinance-citibank

Script para importar o arquivo de extrato em formato XML do Citibank para o MyFinance
Ruby
1
star
18

phpspec-gnome-notify

Automatic notifications of tests written in PHPSpec on Gnome Desktop
PHP
1
star
19

podcast-deployment

Script used on http://rafael.adm.br/voltandopracasa to automate the deployment of podcast episodes
PHP
1
star