Created
August 1, 2013 02:36
-
-
Save renoirb/6127990 to your computer and use it in GitHub Desktop.
Browser support icons for WebPlatform.org, by Lea Verou
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Browser support icons for WebPlatform.org, by Lea Verou | |
| * see: http://docs.webplatform.org/w/load.php?debug=true&lang=en&modules=ext.rtlcite%7Cmediawiki.legacy.commonPrint%2Cshared%7Cskins.webplatform&only=styles&skin=webplatform&* | |
| */ | |
| @font-face { | |
| font-family:'Gudea'; | |
| font-weight:normal; | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-regular-webfont.eot'); | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-regular-webfont.woff') format('woff'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-regular-webfont.ttf') format('truetype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-regular-webfont.svg#GudeaRegular') format('svg') | |
| } | |
| @font-face { | |
| font-family:'Gudea'; | |
| font-weight:bold; | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-bold-webfont.eot'); | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-bold-webfont.eot?#iefix') format('embedded-opentype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-bold-webfont.woff') format('woff'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-bold-webfont.ttf') format('truetype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-bold-webfont.svg#GudeaRegular') format('svg') | |
| } | |
| @font-face { | |
| font-family:'Gudea'; | |
| font-weight:normal; | |
| font-style:italic; | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-italic-webfont.eot'); | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-italic-webfont.eot?#iefix') format('embedded-opentype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-italic-webfont.woff') format('woff'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-italic-webfont.ttf') format('truetype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/gudea-italic-webfont.svg#GudeaRegular') format('svg') | |
| } | |
| @font-face { | |
| font-family:'Bitter'; | |
| font-weight:normal; | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-regular-webfont.eot'); | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-regular-webfont.woff') format('woff'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-regular-webfont.ttf') format('truetype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-regular-webfont.svg#BitterRegular') format('svg') | |
| } | |
| @font-face { | |
| font-family:'Bitter'; | |
| font-weight:bold; | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-bold-webfont.eot'); | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-bold-webfont.eot?#iefix') format('embedded-opentype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-bold-webfont.woff') format('woff'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-bold-webfont.ttf') format('truetype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-bold-webfont.svg#BitterBold') format('svg') | |
| } | |
| @font-face { | |
| font-family:'Bitter'; | |
| font-weight:normal; | |
| font-style:italic; | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-italic-webfont.eot'); | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-italic-webfont.eot?#iefix') format('embedded-opentype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-italic-webfont.woff') format('woff'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-italic-webfont.ttf') format('truetype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/bitter-italic-webfont.svg#BitterBold') format('svg') | |
| } | |
| @font-face { | |
| font-family:'WPSymbols'; | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.eot'); | |
| src:url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.eot?#iefix') format('embedded-opentype'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.svg#WPSymbols') format('svg'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.woff') format('woff'), url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.ttf') format('truetype'); | |
| } | |
| :not(dd) > dl.compat-list { | |
| float: none; | |
| margin-left: 7em; | |
| margin-bottom: -3.3em; | |
| } | |
| h2 { | |
| font-weight: normal; | |
| font-size: 20px; | |
| border-bottom: 1px solid #e2e3e4; | |
| padding-top: 14px; | |
| } | |
| .compat-table, | |
| .wikitable, | |
| .action-view table:not([class]) { | |
| position: relative; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| box-shadow: 0px -1px 0px #eae8e5; | |
| border-radius: 6px 6px 0 0; | |
| border: 1px solid #ddd3c2; | |
| font-family: Bitter; | |
| table-layout: fixed; | |
| } | |
| .compat-table tr, | |
| .wikitable tr, | |
| .action-view table:not([class]) tr { | |
| background: #e1dccf; | |
| } | |
| .compat-table tr:nth-child(even), | |
| .wikitable tr:nth-child(even), | |
| .action-view table:not([class]) tr:nth-child(even) { | |
| background: #fbf7ef; | |
| } | |
| .compat-table tbody:first-child tr:first-child th:first-child, | |
| .wikitable tbody:first-child tr:first-child th:first-child, | |
| .action-view table:not([class]) tbody:first-child tr:first-child th:first-child, | |
| .compat-table thead th:first-child, | |
| .wikitable thead th:first-child, | |
| .action-view table:not([class]) thead th:first-child { | |
| border-top-left-radius:5px; | |
| border-left: none; | |
| } | |
| .compat-table tr:first-child th:last-child, | |
| .wikitable tr:first-child th:last-child, | |
| .action-view table:not([class]) tr:first-child th:last-child, | |
| .compat-table tr:first-child td:last-child, | |
| .wikitable tr:first-child td:last-child, | |
| .action-view table:not([class]) tr:first-child td:last-child { | |
| border-top-right-radius:5px; | |
| border-right: none; | |
| } | |
| .compat-table tr td:last-child, | |
| .wikitable tr td:last-child, | |
| .action-view table:not([class]) tr td:last-child { | |
| border-right: none; | |
| } | |
| .compat-table tr:nth-child(n+2) td, | |
| .wikitable tr:nth-child(n+2) td, | |
| .action-view table:not([class]) tr:nth-child(n+2) td { | |
| border-bottom: none; | |
| } | |
| .compat-table td:first-child, | |
| .wikitable td:first-child, | |
| .action-view table:not([class]) td:first-child, | |
| .compat-table tbody th:first-child, | |
| .wikitable tbody th:first-child, | |
| .action-view table:not([class]) tbody th:first-child { | |
| border-top: 1px solid white; | |
| border-left: none; | |
| color: white; | |
| background: #6c6657; | |
| font-weight: normal; | |
| } | |
| .compat-table td:first-child a:hover, | |
| .wikitable td:first-child a:hover, | |
| .action-view table:not([class]) td:first-child a:hover, | |
| .compat-table tbody th:first-child a:hover, | |
| .wikitable tbody th:first-child a:hover, | |
| .action-view table:not([class]) tbody th:first-child a:hover { | |
| color: #F89C20; | |
| } | |
| .compat-table thead th, | |
| .wikitable thead th, | |
| .action-view table:not([class]) thead th, | |
| .compat-table tbody:first-child > tr:first-child > th:not(:only-of-type), | |
| .wikitable tbody:first-child > tr:first-child > th:not(:only-of-type), | |
| .action-view table:not([class]) tbody:first-child > tr:first-child > th:not(:only-of-type) { | |
| font-weight: normal; | |
| padding: 10px; | |
| border: 1px solid white; | |
| border-bottom-color: #b8af98; | |
| border-left: none; | |
| background: rgb(225,217,198); | |
| background: -moz-linear-gradient(rgb(230,226,216), rgb(225,217,198)); | |
| background: -webkit-linear-gradient(rgb(230,226,216), rgb(225,217,198)); | |
| background: -o-linear-gradient(rgb(230,226,216), rgb(225,217,198)); | |
| background: linear-gradient(rgb(230,226,216), rgb(225,217,198)); | |
| color: inherit; | |
| } | |
| .compat-table thead th:last-child, | |
| .wikitable thead th:last-child, | |
| .action-view table:not([class]) thead th:last-child, | |
| .compat-table tbody:first-child > tr:first-child > th:not(:only-of-type):last-child, | |
| .wikitable tbody:first-child > tr:first-child > th:not(:only-of-type):last-child, | |
| .action-view table:not([class]) tbody:first-child > tr:first-child > th:not(:only-of-type):last-child { | |
| border-right: none; | |
| } | |
| .compat-table td, | |
| .wikitable td, | |
| .action-view table:not([class]) td { | |
| padding: 5px 15px; | |
| border: 1px solid white; | |
| border-left: none; | |
| } | |
| .compat-table th, | |
| .wikitable th, | |
| .action-view table:not([class]) th { | |
| padding: 10px 15px; | |
| font-family: Bitter; | |
| text-align: left; | |
| } | |
| .compat-table td { | |
| font-weight: bold; | |
| } | |
| .compat-table a, | |
| .wikitable a, | |
| .action-view table:not([class]) a { | |
| color: inherit; | |
| } | |
| /** | |
| * Compat lists | |
| */ | |
| dl.compat-list { | |
| position: relative; | |
| margin: 0; | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: 1; | |
| } | |
| :not(dd) > dl.compat-list { | |
| float: right; | |
| margin-top: -8px; | |
| } | |
| @-webkit-keyframes show { | |
| from { -webkit-transform: scale(0); opacity: 0; } | |
| } | |
| @-moz-keyframes show { | |
| from { -moz-transform: scale(0); opacity: 0; } | |
| } | |
| @-o-keyframes show { | |
| from { -o-transform: scale(0); opacity: 0; } | |
| } | |
| @keyframes show { | |
| from { transform: scale(0); opacity: 0; } | |
| } | |
| dl.compat-list dd > dl.compat-list { | |
| display: none; | |
| position: absolute; | |
| z-index: 2; | |
| background: white; | |
| width: 98px; | |
| padding: 10px 7px 10px 15px; | |
| border-radius: 10px; | |
| margin: -35px 0 0 15px; | |
| box-shadow: 2px 2px 5px rgba(0,0,0,.2); | |
| -webkit-transform-origin: 0 1em; | |
| -moz-transform-origin: 0 1em; | |
| -o-transform-origin: 0 1em; | |
| transform-origin: 0 1em; | |
| } | |
| dl.compat-list dd:hover > dl.compat-list, | |
| dl.compat-list dt:hover + dd > dl.compat-list, | |
| dl.compat-list dd:focus > dl.compat-list, | |
| dl.compat-list dt:focus + dd > dl.compat-list, | |
| dl.compat-list > dt:hover > span { | |
| display: block; | |
| -webkit-animation: show .3s cubic-bezier(.2,1.2,.7,1.2); | |
| -moz-animation: show .3s cubic-bezier(.2,1.2,.7,1.2); | |
| -o-animation: show .3s cubic-bezier(.2,1.2,.7,1.2); | |
| animation: show .3s cubic-bezier(.2,1.2,.7,1.2); | |
| } | |
| dl.compat-list dd > dl.compat-list:before, | |
| dl.compat-list dt + dd > dl.compat-list:before { | |
| content: ''; | |
| position: absolute; | |
| left: -10px; | |
| top: 20px; | |
| width: 0; | |
| height: 0; | |
| border: 10px solid transparent; | |
| border-right-color: white; | |
| border-left: 0; | |
| } | |
| dl.compat-list dt { | |
| position: relative; | |
| display: inline-block; | |
| width: 36px; | |
| height: 36px; | |
| background: url(http://docs.webplatform.org/w/skins/webplatform/images/cloud.svg) no-repeat center; | |
| margin: 0; | |
| } | |
| dl.compat-list > dt > span { | |
| display: none; | |
| position: absolute; | |
| top: 35px; | |
| left: 0; | |
| z-index: 3; | |
| padding: .3em .5em; | |
| border-radius: .3em; | |
| margin-left: .2em; | |
| background: #694D9F; | |
| box-shadow: 1px 1px 5px rgba(0,0,0,.3); | |
| color: white; | |
| white-space: pre; | |
| font-weight: bold; | |
| line-height: 1.3; | |
| pointer-events: none; | |
| -webkit-transform-origin: .5em 0; | |
| -moz-transform-origin: .5em 0; | |
| -o-transform-origin: .5em 0; | |
| transform-origin: .5em 0; | |
| } | |
| dl.compat-list > dt > span:before { | |
| content: ''; | |
| position: absolute; | |
| top: -.3em; | |
| left: .4em; | |
| width: 0; | |
| height: 0; | |
| border: 0.5em solid transparent; | |
| border-bottom-color: #694D9F; | |
| border-top: 0; | |
| } | |
| dl.compat-list > dt > span:after { | |
| font-weight: normal; | |
| font-size: smaller; | |
| } | |
| dl.compat-list > dt.Supported > span:after { | |
| content: '\ASupported'; | |
| } | |
| dl.compat-list > dt.Unsupported > span:after { | |
| content: '\AUnsupported'; | |
| } | |
| dl.compat-list > dt.Partial > span:after { | |
| content: '\APartial support'; | |
| } | |
| dl.compat-list > dt.Unknown > span:after { | |
| content: '\AUnknown'; | |
| } | |
| dl.compat-list dt:before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; right: 0; bottom: 0; left: 0; | |
| background: no-repeat center; | |
| } | |
| dl.compat-list dt.chrome:before, | |
| dl.compat-list dt.and_chr:before { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/chrome.png'); | |
| } | |
| dl.compat-list dt.firefox:before, | |
| dl.compat-list dt.and_ff:before { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/firefox.png'); | |
| } | |
| dl.compat-list dt.ie:before, | |
| dl.compat-list dt.ie_mob:before { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/ie.png'); | |
| background-position: 40% 50%; | |
| } | |
| dl.compat-list dt.opera:before, | |
| dl.compat-list dt.op_mini:before, | |
| dl.compat-list dt.op_mob:before { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/opera.png'); | |
| } | |
| dl.compat-list dt.safari:before, | |
| dl.compat-list dt.ios_saf:before { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/safari.png'); | |
| } | |
| dl.compat-list dt.mobiles:before { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/mobile.png'); | |
| } | |
| dl.compat-list dt.android:before { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/android.png'); | |
| } | |
| dl.compat-list dt.bb:before { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/blackberry.png'); | |
| } | |
| dl.compat-list dd { | |
| display: inline-block; | |
| position: relative; | |
| top: -16px; | |
| width: 13px; height: 13px; | |
| padding: 0; | |
| margin: 0 0 0 -11px; | |
| border-radius: 50%; | |
| box-shadow: 1px 1px 3px rgba(0,0,0,.3), 0 1px 1px white inset; | |
| background: #f9f7f3 no-repeat center; | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/questionmark.svg'); | |
| background-size: 8px auto; | |
| font-size: 0; line-height: 0; | |
| color: transparent; | |
| } | |
| dl.compat-list dl.compat-list dd { | |
| margin-right: 10px; | |
| } | |
| dl.compat-list dd.Unsupported { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/x.svg'); | |
| } | |
| dl.compat-list dd.Partial { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/warning.svg'); | |
| } | |
| dl.compat-list dd.Supported { | |
| background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/checkmark.svg'); | |
| } | |
| .standardization_status { | |
| position: relative; | |
| float: right; | |
| width: 13px; | |
| height: 13px; | |
| padding: 15px; | |
| background: url(http://docs.webplatform.org/w/skins/webplatform/images/standardization-status.svg) | |
| hsl(40, 34%, 88%); | |
| background-size: 100% 700%; | |
| margin: 13px 0 15px 10px; | |
| white-space: nowrap; | |
| border-radius: 50%; | |
| font-size: 0; | |
| color: transparent; | |
| box-shadow: 0 -1px 2px 1px hsla(40, 34%, 30%, .2) inset, | |
| 0 1px white, 0 0 0 10px #f9f7f3; | |
| } | |
| .standardization_status[title="W3C Working Draft"] { | |
| background-position: 0 -100%; | |
| } | |
| .standardization_status[title="W3C Last Call Working Draft"] { | |
| background-position: 0 -200%; | |
| } | |
| .standardization_status[title="W3C Candidate Recommendation"] { | |
| background-position: 0 -300%; | |
| } | |
| .standardization_status[title="W3C Proposed Recommendation"] { | |
| background-position: 0 -400%; | |
| } | |
| .standardization_status[title="W3C Recommendation"] { | |
| background-image: none; | |
| box-shadow: | |
| 0 -1px 2px 1px hsla(40, 34%, 30%, .2) inset, | |
| 0 0 0 7px #005A9C inset, | |
| 0 1px white, 0 0 0 10px #f9f7f3; | |
| } | |
| .standardization_status[title="Mixed"] { | |
| background-position: 0 -500%; | |
| } | |
| .standardization_status[title="Deprecated"] { | |
| background-position: 0 -600%; | |
| } | |
| .standardization_status[title="Non-Standard"] { | |
| background-image: none; | |
| box-shadow: | |
| 0 -1px 2px 1px hsla(40, 34%, 30%, .2) inset, | |
| 0 0 0 7px #e00 inset, | |
| 0 1px white, 0 0 0 10px #f9f7f3; | |
| } | |
| .standardization_status[title="De Facto Standard"] { | |
| background-image: none; | |
| box-shadow: | |
| 0 -1px 2px 1px hsla(40, 34%, 30%, .2) inset, | |
| 0 0 0 7px #1f9374 inset, | |
| 0 1px white, 0 0 0 10px #f9f7f3; | |
| } | |
| .standardization_status:before { | |
| content: url(http://docs.webplatform.org/w/skins/webplatform/images/w3c-small.svg); | |
| position: absolute; | |
| top: 13px; | |
| left: 10px; | |
| text-align: center; | |
| } | |
| @media screen { | |
| .standardization_status[title^="W3C Last Call Working Draft"]:after, | |
| .standardization_status[title^="W3C Recommendation"]:after { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| width: 7px; | |
| height: 7px; | |
| margin-left: -6.5px; | |
| background: white; | |
| border: 3px solid #005A9C; | |
| border-radius: 50%; | |
| } | |
| .standardization_status[title^="W3C Last Call Working Draft"]:after { | |
| bottom: -3px; | |
| } | |
| .standardization_status[title^="W3C Recommendation"]:after { | |
| top: -3px; | |
| } | |
| .standardization_status[title^="Non-Standard"]:after, | |
| .standardization_status[title^="De Facto Standard"]:after, | |
| .standardization_status[title^="Experimental"]:after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; right: 8px; left: 8px; | |
| border-top: 4px hsla(0, 100%, 40%, .8) solid; | |
| margin-top: -3px; | |
| } | |
| } | |
| @media print { | |
| .standardization_status:after { | |
| content: attr(title); | |
| text-transform: uppercase; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p><br><span class="standardization_status" title="W3C Last Call Working Draft">W3C Candidate Recommendation</span></p> | |
| <dl class="compat-list"> | |
| <dt class="Unknown chrome"><span>Chrome</span></dt> | |
| <dd class="Unknown">Unknown</dd><dt class="Unknown firefox"><span>Firefox</span></dt> | |
| <dd class="Unknown">Unknown</dd><dt class="Unknown ie"><span>IE</span></dt> | |
| <dd class="Unknown">Unknown</dd><dt class="Unknown opera"><span>Opera</span></dt> | |
| <dd class="Unknown">Unknown</dd><dt class="Unknown safari"><span>Safari</span></dt> | |
| <dd class="Unknown">Unknown</dd><dt class="Unknown mobiles"><span>Mobiles</span></dt> | |
| <dd class="Unknown">Unknown | |
| <dl class="compat-list"><dt class="Unknown android"><span>Android Browser</span></dt> | |
| <dd class="Unknown">Unknown</dd><dt class="Unknown bb"><span>Blackberry Browser</span></dt> | |
| <dd class="Unknown">Unknown</dd><dt class="Unknown and_chr"><span>Chrome for Android</span></dt> | |
| <dd | |
| class="Unknown">Unknown</dd><dt class="Unknown and_ff"><span>Firefox for Android</span></dt> | |
| <dd | |
| class="Unknown">Unknown</dd><dt class="Unknown ie_mob"><span>IE Mobile</span></dt> | |
| <dd class="Unknown">Unknown</dd><dt class="Unknown op_mob"><span>Opera Mobile</span></dt> | |
| <dd class="Unknown">Unknown</dd><dt class="Unknown op_mini"><span>Opera Mini</span></dt> | |
| <dd class="Unknown">Unknown</dd><dt class="Unknown ios_saf"><span>iOS Safari</span></dt> | |
| <dd class="Unknown">Unknown</dd> | |
| </dl> | |
| </dd> | |
| </dl> | |
| <h2><span class="mw-headline" id="Summary">Summary</span></h2> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment