The CSS, HTML, and JavaScript Lab

The CSS, HTML, and JavaScript Lab



This is a collection of experiments, methods, tips and tricksrelated to HTML, CSS, and JavaScript that may or may not come in handysome day. Some of these techniques are based on ideas of my own, othersare based on techniques, tutorials, and ideas that I’ve come across onthe web, on mailing lists, in books, and other places. Ifyou want to use any of these techniques, go ahead, take a look at thesource to learn how it's done. However, for the techniques that useimages I ask that you please create your own graphics. Ifyou ask me for help on how to implement this stuff and don’t get aquick response, it’s not because I’m ignoring you or don’t want tohelp. I just don’t have the time to help everyone. Sorry about that. Ifyou have specific questions related to CSS, a good place to look forhelp is the css-discuss mailing list. Demos and techniques

CSS FramesThe look of frames without using frames.CSS Tabs, separate listsA two-level tab menu based on separate unordered lists.CSS Tabs, nested listsA two-level tab menu based on nested unordered lists.CSS Tabs, nested lists (Listamatic 2)A two-level tab menu based on separate unordered lists. Based on the HTML from Listamatic 2.CSS Teaser Box, fixed widthA fixed width box with rounded corners. It uses no extra markup and just one image.CSS Teaser Box, flexible widthA flexible width (and height) box with rounded corners. It uses very little extra markup and two images.DropshadowA simple dropshadow effect.Equal height boxes with CSSSide-by-side elements that behave like table cells.Equal height boxes with CSS, part IISide-by-side elements that behave like table cells. Some workarounds to prevent Internet Explorer from breaking down completely.Flexible box with custom corners and bordersA flexible width (and height) box with custom corners and borders.Horizontal centeringA very basic example of horizontal centring with CSS.Horizontal and vertical centringHorizontal and vertical centring with CSS.Inverted Sliding Doors TabsUpside down tabs based on the Sliding Doors technique. Also available in Italian (translation by Egidio Murru).News listA list of vertically expandable boxes with rounded corners.Rounded cornersAn older example of a box with rounded corners.Soft dropshadowA somewhat limited way of creating a nice and soft dropshadow.Styling form controlsExamples of CSS applied to form elements.Transparent custom corners and bordersCreate a resizable box with custom, transparent corners and borders and no extra markup. A much improved version of the Flexible box with custom corners and borders demo.Two column CSS layout with full width header and footerFixed width, centred horizontally. Translated articles

Someof the articles I've written have been translated to other languagesthan English. All Swedish translations are done by myself. 10 must haves in IE NextA three-part article series that explains the selectors that are available in CSS 2.1. Available in the following languages:

• Brazilian Portuguese: 10 itens para a próxima versão do IE (Translation by Mauricio Samy Silva)
  
• English: 10 must haves in IE Next
  

10 colour contrast checking tools to improve the accessibility of your designAlist of tools that help make your design readable to all users bychecking if text has sufficient contrast against its background.Available in the following languages:

• Belorussian: 10 прылад праверкі кантрасту вашага дызайну для паляпшэння яго чытальнасці (Translation by PC)
  
• English: 10 colour contrast checking tools to improve the accessibility of your design
  
• Russian: 10 инструментов проверки контраста вашего дизайна для улучшения его „читабельности“ (Translation by Alexey Bass)
  

Accessibility myths and misconceptionsWhat accessibility is and is not:

• Chinese: 親和力迷思與錯誤觀念 (Translation by OOO)
  
• English: Accessibility myths and misconceptions
  
• French: Mythes et Idées fausses sur l’accessibilité (Translation by Marie ALHOMME)
  
• German: Zugänglichkeit: Mythen und falsche Vorstellungen (Translation by Eric Eggert)
  
• Spanish: Mitos y Conceptos Erróneos sobre la Accesibilidad (Translation by Gabriel Porras)
  
• Turkish: Erişilebilirlik hakkındaki Efsane ve Yanlış Anlaşılmalar (Translation by Orhan Veli Firik)
  

Are we designers or developersIfyou do not do graphic design, but work with HTML, CSS, JavaScript, andaccessibility, are you a designer or a developer? Available in thefollowing languages:

• Bulgarian: Дизайнери или дивелъпъри? (Translation by Michel Bozgounov)
  
• Dutch: Ontwerpers of ontwikkelaars? (Translation by Michael Dierckx)
  
• English: Are we designers or developers
  
• German: Sind wir Designer oder Entwickler? (Translation by Birgit Zimmermann)
  
• Greek: Είμαστε designers ή developers; (Translation by Yiannis Konstantakopoulos)
  
• Japanese: [Web]僕たちはデザイナーか、それともデベロッパーか？ (Translation by Arata Kojima)
  
• Spanish: ¿Somos diseñadores o desarrolladores? (Translation by Fer Torres)
  

Barrier-free Web design, a.k.a. Web accessibility 2.0A joint attempt by myself and Tommy Olsson to explain why we believe that including everybody does not risk excluding people with disabilities.

• English: Barrier-free Web design, a.k.a. Web accessibility 2.0
  
• Italian: Web design senza barriere, ovvero accessibilità 2.0 (Translation by Franco Carcillo)
  

Basics of search engine optimisationBasic tips for Search Engine Optimisation: add quality content regularly and make sure your site is well-built.

• Chinese: 搜索引擎优化的基础 (Translation by GreyCrab)
  
• Dutch: Zoekmachine Optimalisatie (Translation by Bart van de Biezen)
  
• English: Basics of search engine optimisation
  
• Italian: Ottimizzazione per i motori di ricerca (SEO): Principi di base (Translation by Luca Magnani)
  
• Polish: Podstawy optymalizacji dla wyszukiwarek (Translation by Marcin Gaik)
  
• Spanish: Principios para la Optimización en Buscadores (Translation by Gabriel Porras)
  

Bring on the tablesHow to use HTML tables the right way – to create accessible data tables:

• Chinese: 标准化——表格 (Translation by JunChen)
  
• English: Bring on the tables
  
• French: Au tableau ! (Translation by Pompage.net)
  
• Italian: Tabelle HTML: come usarle, quando usarle (Translation by Giacomo Paita)
  
• Russian: Практический HTML: работаем с таблицами (Translation by DreamwinD)
  

CSS 2.1 SelectorsA three-part article series that explains the selectors that are available in CSS 2.1. Available in the following languages:

• Arabic: مُحدِّدات CSS 2.1, مُحدِّدات CSS 2.1 | الجزء الثاني (Translation by Ahmad Bagadood)
  
• Brazilian Portuguese: Seletores CSS 2.1 Parte 1, Seletores CSS 2.1 Parte 2, Seletores CSS 2.1 Parte 3 (Translation by Mauricio Samy Silva)
  
• Chinese: [译稿]细说CSS样式选择符（一）——CSS 2.1 Selectors, [译稿]细说CSS样式选择符（二）——CSS 2.1 Selectors, [译稿]细说CSS样式选择符（三）——CSS 2.1 Selectors
  
• Dutch: CSS 2.1 Selectors, deel 1, CSS 2.1 Selectors, deel 2, CSS 2.1 Selectors, deel 3 (Translation by Arjan Snaterse)
  
• English: CSS 2.1 Selectors Part 1, CSS 2.1 Selectors Part 2, CSS 2.1 Selectors Part 3
  
• French: Sélecteurs CSS 2.1, partie 1, Sélecteurs CSS 2.1, partie 2, Sélecteurs CSS 2.1, partie 3 (Translation by Manuel Catez)
  
• Polish: Selektory CSS 2.1 - część 1, Selektory CSS 2.1 - część 2, Selektory CSS 2.1 - część 3 (Translation by Łukasz Adamczuk)
  
• Spanish: Selectores CSS 2.1, Parte 1 (Translation by Juan Pablo Brocca)
  

CSS 3 selectors explainedCSS3 brings us many powerful new CSS selectors. Browser support iscurrently lacking, but taking a look at what lies ahead is stilluseful. Available in the following languages:

• Brazilian Portuguese: Seletores CSS3 (Translation by Maurício Samy Silva)
  
• English: CSS 3 selectors explained
  
• Italian: I selettori CSS3 illustrati (Translation by Gabriele Romanato)
  
• Polish: Selektory CSS 3 (Translation by Łukasz Adamczuk)
  

CSS Frames v2, full-heightCreatethe visual effect of HTML frames with CSS and make the scrolling areastretch to 100% height regardless of the amount of content. Availablein the following languages:

• English: CSS Frames v2, full-height
  
• French: Les cadres en CSS
  

CSS tips and tricksMy favourite time and trouble savers when working with CSS. Available in the following languages:

• Chinese: CSS的十八般技巧 (Translation by ajie)
  
• English: CSS tips and tricks Part 1, CSS tips and tricks Part 2
  
• French: Trucs et astuces CSS I, Trucs et astuces CSS II (Translation by Normand Lamoureux)
  
• Polish: Sztuczki w CSS, Część 1, Sztuczki w CSS, Część 2 (Translation by Marcin Gaik)
  
• Spanish: CSS mas eficiente utilizando abreviaturas ~ Parte 1 (Translation by Dan Goldfeder)
  

Developing with web standardsA document on web standards and accessibility. Available in the following languages:

• Brazilian Portuguese: Desenvolvendo com os Web Standards (Translation by Ricardo Augusto)
  
• Bulgarian: Да работим по уеб стандартите (Translation by Boby Dimitrov)
  
• Chinese: 伴随着Web标准发展 (Translation by Liushen)
  
• Dutch: Ontwikkelen met web standaarden (Translation by Fabian Deceuninck)
  
• English: Developing with web standards
  
• Finnish: Web-julkaiseminen ja standardit (Translation by Yoji Hirabayashi, Mikko Kekki, and Pekka Peltonen)
  
• French: Développer avec les standards Web (Translation by Clément Hardouïn)
  
• German: Entwickeln mit Webstandards (Translation by Christian Machmeier) and Webdesign mit Webstandards (Translation by Andreas Kalt)
  
• Italian: Sviluppare con gli Standard del Web (Translation by Mirko Corli and Franco Carcillo)
  
• Norwegian: Standardbasert utvikling for nettet (Translation by Thomas Hammer)
  
• Russian: Разработка с Веб-Стандартами (Translation by Alexander Shabuniewicz)
  
• Swedish: Webbutveckling med standarder
  
• Turkish: Web Standartlarını Kullanarak Geliştirmek (Translation by Mert Derman)
  

Efficient CSS with shorthand propertiesSave space in your CSS files by using shorthand. Available in the following languages:

• English: Efficient CSS with shorthand properties
  
• Italian: CSS efficienti con l’uso delle shorthand (Translation by Vincenzo Mania)
  
• Polish: Efektywny CSS ze skróconymi właściwościami (Translation by Piotr Janeczek)
  

Evaluating Website AccessibilityA three-part article series that explains how to evaluate the basic accessibility of a website.

• Chinese: 网站亲和力评估 Part 1：背景与准备 (Translation by Liushen)
  
• English: Evaluating Website Accessibility Part 1, Background and Preparation, Evaluating Website Accessibility Part 2, Basic Checkpoints, Evaluating website accessibility Part 3, Digging Deeper
  
• French: Évaluer l’accessibilité d’un site web, première partie : Les préliminaires (Translation by Pompage.net)
  
• German: Die Evaluierung von Webseitenzugänglichkeit Teil 1, Hintergrund und Vorbereitung, Die Evaluierung von Webseitenzugänglichkeit Teil 2, Grundlegende Prüfabschnitte, Die Evaluierung von Webseitenzugänglichkeit Teil 3, Das Nachhaken (Translation by Nadja Müller)
  
• Italian: Valutazione dell’accessibilità di un sito web – Parte Prima, storia e preparazione, Valutazione dell’accessibilità di un sito web - Parte Seconda, controlli di base, Valutazione dell’accessibilità di un sito web - Parte Terza, scavando più a fondo (Translation by Luca Magnani)
  
• Norwegian Bokmål: Evaluering av nettsted tilgjengelighet del 1, Bakgrunn og forberedelse, Evaluering av nettsted tilgjengelighet del 2, Grunnleggende Kontrollpunkt, Evaluering av nettsted tilgjengelighet del 3, Enda Mer (Translation by Bjørn Enki)
  
• Turkish: Site Erişilebilirliğinin Derecesinin Tespiti Bölüm 1, Altyapı ve Hazırlıklar, Site Erişilebilirliğinin Derecesinin Tespiti Bölüm 2, Temel Kontroller, Site Erişilebilirliğinin Derecesinin Tespiti Bölüm 3, Dibini Kazımak (Translation by Orhan Veli Firik)
  

Forgotten CSS selectorsDueto lack of support in Internet Explorer 6, web developers have beenavoiding some very useful CSS 2.1 selectors. It’s time to start usingthem. Available in the following languages:

• English: Forgotten CSS selectors
  
• Russian: «Забытые» CSS селекторы.
  

Guidelines for creating better markupSome guidelines that will help you improve the quality of your markup. Available in the following languages:

• English: Guidelines for creating better markup
  
• Russian: 6 основных рекомендаций по улучшению качества вёрстки веб-страниц (Translation by Vsevolod Kozlov)
  

Headings, heading hierarchy, and document outlinesWhatdo you do when an HTML document's main heading is not the first textthat should be marked up as a heading - insert a dummy heading or giveup on having a perfect document outline? Available in the followinglanguages:

• Brazilian Portuguese: Estrutura de cabeçalhos em documentos web (Translation by Maurício Samy Silva)
  
• English: Headings, heading hierarchy, and document outlines
  
• Italian: Intestazioni HTML e la loro gerarchia (Translation by Daniele Alano)
  

How to prevent HTML tables from becoming too wideArarely used CSS property comes to the rescue when dealing withoversized content in tables. Available in the following languages:

• Brazilian Portuguese: Tabelas quebrando layout (Translation by Maurício Samy Silva)
  
• English: How to prevent HTML tables from becoming too wide
  

It’s “class”, not “CSS class”Thereis nothing called a "CSS class" in HTML or CSS, so please refer tovalues of the HTML class attribute as classes or class names instead.Available in the following languages:

• English: It’s “class”, not “CSS class”
  
• Turkish: CSS Sınıfı değil, Sınıf
  

Lame excuses for not being a Web professionalExcusesthat may be valid in some circumstances are too often used to cover upsomebody’s lack of knowledge about modern Web design or development.Available in the following languages:

• English: Lame excuses for not being a Web professional
  
• Indonesian: Alasan Konyol untuk Tidak Menjadi Seorang Profesional (Translation by Anggie Bratadinata)
  

Levels of HTML knowledgeHumorousdescriptions of a few different levels of HTML knowledge among peopleworking in the web industry. Available in the following languages:

• English: Levels of HTML knowledge
  
• Italian: I diversi livelli di conoscenza dell’HTML (Translation by Chalda Pnuzig)
  
• Spanish: Niveles de conocimiento HTML (Translation by Christian Van Der Henst)
  
• Turkish: HTML bilgi düzeyleri (Translation by Eren Emre Kanal)
  

Screen reader testingWhileit is important for all web developers to have access to a screenreader for testing, setting one up may prove a little tricky.Fortunately there are instructions that will help. Available in thefollowing languages:

• English: Screen reader testing
  
• Turkish: Ekran Okuyucu Testi (Translation by İlker Galip)
  

Ten reasons to learn and use web standardsSomeof the most important reasons for spending the time to learn all aboutusing web standards to design and develop websites. Available in thefollowing languages:

• Brazilian Portuguese: 10 razões para aprender e usar os web standards (Translation by Leandro Vieira Pinho) and Dez razões para aprender e usar web standards (Translation by Ranieri Teixeire)
  
• English: Ten reasons to learn and use web standards
  
• French: Dix raisons pour apprendre et utiliser les standards du Web (Translation by Nicolas Gruson)
  
• German: Gründe für webstandards-basiertes Webdesign (Translation by Martin Labuschin)
  
• Polish: 10 powodów dla których warto stosować standardy (Translation by Marcin Gaik)
  
• Russian: 10 причин, чтобы изучать и использовать веб-стандарты
  
• Spanish: Diez razones para aprender y usar los estándares Web (Translation by Gabriel Porras)
  
• Turkish: Web Standartlarını Öğrenmek ve Kullanmak için 10 Sebep (Translation by Orhan Veli Firik)
  

The alt and title attributesExplaining the alt and title attributes, along with some guidelines on how and when to use them. Available in the following languages:

• Chinese: alt属性和title属性 (Translation by JunChen)
  
• English: The alt and title attributes
  

The alt attribute is for images onlyThealt attribute is valid only for images and provides alternative textused when the image cannot be rendered. Do not use it with links andother non-image HTML elements. Available in the following languages:

• English: The alt attribute is for images only
  
• Turkish: Alt özelliği sadece görseller içindir (Translation by İlker Galip)
  

The perils of using XHTML properlyA discussion of the issues involved in serving XHTML with the application/xhtml+xml MIME type. Available in the following languages:

• Chinese: 正确使用XHTML的冒险 (Translated by Neo, edited by JunChen)
  
• English: The perils of using XHTML properly
  
• Turkish: Doğru XHTML Kullanımı (Translation by Orhan Veli Firik)
  

Turning a list into a navigation barHow to use CSS to create a horizontal navigation bar out of a simple ordered list. Available in the following languages:

• English: Turning a list into a navigation bar
  
• French: Transformer une liste en barre de navigation
  

Use the p element to create paragraphsUsingp elements instead of multiple br elements to create paragraphs in HTMLmakes your documents more accessible and easier to style. Available inthe following languages:

• Danish: Brug p-elementet til at inddele tekstafsnit
  
• English: Use the p element to create paragraphs
  
• Turkish: Paragraf oluşturmak için p elementini kullanın
  

Web development mistakesA list of mistakes frequently encountered on the web. Available in the following languages:

• Chinese: web设计与开发常见错误 (Translation by JunChen)
  
• English: Web development mistakes
  
• French: Erreurs de Développement Web (Translation by Marie Alhomme)
  
• Polish: Błędy w tworzeniu stron WWW (Translation by Maciej Łebkowski)
  
• Spanish: Errores comunes del desarrollo web (Translation by Hermann Kaser)
  
• Swedish: Vanliga misstag inom webbuteckling
  

Why standards still matterThelast couple of years may have seen an increase in the level of interestand action around web standards. But it still isn't filtering down tothe mainstream… Available in the following languages:

• English: Why standards still matter
  
• French: Pourquoi les standards comptent toujours (Translation by Marie ALHOMME)
  
• German: Weshalb Webstandards immer noch wichtig sind (Translation by Eric Eggert)
  
• Polish: Standardy niezmiennie ważne (Translation by Dominik Paszkiewicz)