“Recreating the button” by Douglas Bowman is a great read. It shows how one can struggle with browser differences while trying to achieve visually-appealing effect using CSS.

Eliminating the background image sounds like a challenge, so I decided to try to make similar buttons using pure CSS. Goals:

• cross-browser (Firefox, IE6 and IE7, Webkit, Opera)
• smallest possible number of nested elements
• has to work with button and with any other HTML element (such as link or span)

To get three horizontal bands I decided to use thick (1em) borders for top and bottom colors and a background color for the middle one, so the height of element is very little (0.2em). Here’s the idea:

Here’s live demo page.

HTML structure:

using button element:
<button type="button"><span class="btn"><span>longer button text</span></span></button>

other elements:
<a href="#" class="btn"><span>button</span></a>

It was very hard to get button elements work with these CSS rules, so I decided to just remove borders and background from button elements, making them invisible. So there are two nested spans if you want to use button element, and ust one nested element for other uses.

Complete CSS:

button {
	background:transparent;
	cursor:pointer;
	padding:0;
	margin:0;
	border:0px solid transparent;
	overflow-x:visible;
}

.btn {
	display:inline-block;
	/* these three colors make button's pseudo-gradient background */
	border-top:1em solid #f9f9f9;
	background:#eee;
	border-bottom:1em solid #e3e3e3;
	border-left:none;
	border-right:none;
	color:#333;
	cursor:pointer;
	font: 12px/1 Arial, sans-serif;
	height:0.2em;
	padding:0;
	margin:0;
	text-decoration:none;
}

.btn span {
	display:block;
	height:2em;
	line-height:2em;
	margin-top:-1em;
	padding:0 3px;
	border:0.1em solid #000;
	border-color: #bbb #999 #999 #bbb;
}

button .btn {
	/* working around Gecko "unremovable" 3px padding bug */
	-moz-margin-start:-3px;
	-moz-margin-end:-3px;
}

* html .btn {
	overflow:hidden;
}

* html .btn span {
	width:1%;
	position:relative;
	white-space:nowrap;
	z-index:1;
}

* + html button {
	white-space:nowrap;
	overflow:visible;
}

/* some extra CSS for visual effects */

.primary {
	font-weight:bold;
}

.pill-l {
	margin-right:0px;
}

	.pill-l span {
		border-right-color:#777;
	}

.pill-c {}

	.pill-c span {
		border-left-color:#fff;
		border-right-color:#777;
	}

.pill-r {
	margin-left:0px;
}

	.pill-r span {
		border-left-color:#fff;
	}

.btn:hover, button:hover .btn {
	color:#000;
	background-color:#e3e3e3;
	border-top-color:#f0f0f0;
	border-bottom-color:#d9d9d9;
}

.btn:hover span, button:hover .btn span {
	border-color:#99CCFF !important;
}

button:focus .btn, button:active .btn, .btn:focus, .btn:active {
	border-top-color:#e3e3e3;
	border-bottom-color:#f9f9f9;
}

Wczoraj (2008/01/22) opublikowane zostały dwa ważne dokumenty:

• Roboczy szkic specyfikacji HTML5
• Aktualne omówienie różnic między HTL4 a HTML5

Miłej lektury :)

Microsoft postanowił “nie psuć Webu”, a nawet więcej: “poprawić web“.
Napisanie kodu zgodnego ze standardami już nie wystarczy, aby strona wyświetliła się w nadchodzącej, ósmej wersji Explorera tak, jak od silnika renderującego zgodnie ze standardami byśmy oczekiwali. Aby uzyskać dostęp do najbardziej-standardowego trybu, należy wysłać odpowiedni nagłówek HTTP X-UA-Compatible, lub skorzystać z tagu meta:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Więcej informacji także w najnowsym artykule na A List Apart: “Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8“.

W skrócie oznacza to, że w przeglądarce będzie kilka silników renderujących: quirks-mode, standards-mode (który znamy z obecnych wersji) oraz bardziej-standards-mode. Gdy wyjdzie IE9, będziemy mieli kolejny silnik, jednak po użyciu powyższego nagłówka informującego, że docelową wersją jest silnik IE8, dokument nie wykorzysta nowych możliwości silnika z wersji 9. Po przetestowaniu w nowej wersji będziemy mogli zdecydować się na zaktualizowanie nagłówka. Jest też opcja dla lubiących życie “na krawędzi”:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

W powyższym przypadku przeglądarka będzie renderować za pomocą zawsze świeżutkiego, jeszcze bardziej najbardziej zgodnego ze standardami silnika.

Oczywiście nie wszystkim się ten pomysł spodobał, ja także przyłączam się do sceptyków.

Update: Tryb najbardziej zgodny będzie w IE8 włączany także w przypadku natknięcia się na nieznany obecnie, prawidłowy DOCTYPE, w tym ten, który został przyjety dla HTML, czyli

<!DOCTYPE html>

- w takim przypadku już nie będzie konieczności dodawania specjalnych nagłówków [via]