Jens Grochtdreis jensgro
jensgro
/ af-toggle.js
Created
March 11, 2010 23:30
Klappfunktion mit jQuery und WAI-ARIA accessible machen.
This file contains 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
| /* | |
| * Klappfunktion mit jQuery accessible machen mit WAI-ARIA. Skript von Alexander Farkas. | |
| * Original: http://gist.github.com/329709 | |
| * Fork: http://gist.github.com/329832 | |
| * Ausgangsartikel mit Diskussion dazu: | |
| http://grochtdreis.de/weblog/2010/03/11/anreicherung-meiner-webseite-mit-wai-aria/ | |
| */ | |
| (function($){ | |
| /* a11y-helper */ |
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>HTML5 Form Elements</title> | |
| <style> | |
| body { padding:1em; } | |
| </style> | |
| </head> | |
| <body> |
jensgro
/ deaktivierte_eingabefelder.css
Created
November 11, 2010 10:42
Eingabefelder können deaktivert sein. Anbei der passende Style, der auf eine Klasse baut, damit es auch der IE6 kapiert.
This file contains 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
| /* deaktivierte Eingabefelder */ | |
| .deact input.input-text { | |
| border: none; | |
| color: #666; | |
| } | |
jensgro
/ clearfix.css
Created
November 15, 2010 14:05
Dank des Clearfixes umfassen Container floatende Kindelemente. Alternative ist overflow: hidden, die aber nicht immer gut funktioniert.
This file contains 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
| /** | |
| * @section Clearing Methoden | |
| * @see http://www.yaml.de/de/dokumentation/grundlagen/allgemeines.html | |
| */ | |
| .clearfix:after { | |
| clear:both; | |
| content:"."; | |
| display:block; | |
| font-size:0; |
jensgro
/ hideme.css
Created
November 15, 2010 15:04
hide elements in stead of using "display: none" which hides content even for screenreaders.
This file contains 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
| .hide { | |
| position:absolute; | |
| top:-32768px; | |
| left:-32768px; | |
| } | |
| /* if the page has "direction:rtl;" then "right" should be negative. */ |
jensgro
/ ie-classes.html
Created
November 17, 2010 06:23
Create a special class for body depending on which IE or if no IE reads the page. Helps for avoiding hacks. Uses conditional comments.
This file contains 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
| <!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> | |
| <!--[if IE 7 ]> <body class="ie7"> <![endif]--> | |
| <!--[if IE 8 ]> <body class="ie8"> <![endif]--> | |
| <!--[if IE 9 ]> <body class="ie9"> <![endif]--> | |
| <!--[if (gt IE 9)|!(IE)]><!--> | |
| <body> | |
| <!--<![endif]--> |
jensgro
/ ie-html5-fix.js
Created
June 16, 2011 21:27
HTML5-Elemente für IE bis Version 8 "anmelden"
This file contains 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
| <script> | |
| //http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html | |
| for(var e,l='article aside footer header nav section time'.split(' ');e=l.pop();document.createElement(e)) | |
| </script> |
This file contains 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
| /* normal screen layout */ | |
| @media screen and (min-width: 760px) {} | |
| /* smaller devices */ | |
| @media screen and (min-width: 481px) and (max-width: 759px) {} | |
| /* mobile */ | |
| @media screen and (max-width: 480px) {} |
This file contains 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
| /* Die Box würde so breiter als 100% werden. */ | |
| #main { | |
| width: 100%; | |
| padding: 20px; | |
| } | |
| /* Ein weiteres DIV - #main_inner - übernimmt die Abstände. */ | |
| #main { | |
| width: 100%; | |
| } |
This file contains 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
| /* Am Anfang steht CSS für alle */ | |
| body { /* allgemeine Regeln */} | |
| @media only screen and (min-width: 480px) { | |
| /* mobile Browser */ | |
| } | |
| @media only screen and (min-width: 768px) { | |
| /* Tablets im Portrait Modus */ | |
| } |
OlderNewer