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;
}

I guess I was subconsciously coining a new term–which I so rarely do–this time, combining crowd and cloud into something new. I think I like it, even if it is a bit artificial.
- Seth Godin

<a href="http://www.linkedin.com/in/pawelknapik"
rel="me">mój profil</a>

stwierdzam, że pod tym adresem znajduje się strona opisująca moją osobę – dzięki temu blog i profil na Linkedin stają się stronami powiązanymi w Social Graph. Jeśli teraz mój przyjaciel umieści na swojej stronie link

<a href="http://pawel.gada.pl"
rel="friend">Paweł</a>

to po pierwsze strony te staną się gałęziami większej sieci społecznej, a po drugie dzięki API Social Graph mój przyjaciel dowiedzieć się może o fakcie istnienia mojego profilu na Linkedin.
Serwis społecznościowy może dać przy rejestracji możliwość podania adresów stron zawierających informacje o mojej sieci społecznej i dzięki API “zaimportować” tę sieć powiązań do mojego profilu. Załóżmy teraz, że któryś z moich przyjaciół już wcześniej założył konto w tym serwisie społecznościowym i na swoim blogu umieścił link do profilu oznaczając jako powiązany ze swoją osobą – w tym momencie serwis może poinformować mnie, że mój przyjaciel ma już konto i dać możliwość dodania go do listy kontaktów. Proste i piękne! Sieć społeczna staje się “przenośna”, maleje potrzeba potwierdzania po raz kolejny że moi znajomi są faktycznie moimi znajomymi, wysyłania zaproszeń itd, itp…
Bardzo ważny jest też fakt, że linki, które umieszczamy na naszych stronach są pod naszą kontrolą, a więc sami decydujemy, jakie informacje o sieci powiązań udostępniamy, czyli dane te nie są własnością żadnej korporacji.

[Social Graph API FAQ] | [Example Applications]

app.addRepository("modules/jstal/jstal.js");
app.addRepository("modules/helma/Http.js");
app.addRepository("modules/core/JSON.js");

global.dbData =
helma.Http().getUrl('http://localhost:5984/test/_all_docs')
.content.parseJSON();

var template =
<ul xmlns:tal="http://xml.zope.org/namespaces/tal">
	<li tal:repeat="row dbData/rows">
		<em  tal:content="string: id = ${row/id}" />
	</li>
</ul>;

res.write( jstal(template).render() )

I used to write some PHP code before, and one of the best tools I used then was PHPTAL (implementation of Zope’s Template Attribute Language in PHP). I won’t elaborate why I like this template language (they did it), but it’s really really better than templates based on string replacing and concatenation (SMARTY, anyone?)

Some day I thought it would be great not only to use JS on the server, but add TAL template system to this toolbox, so I started to imlpement TAL specification in JS, using E4X (as I’m targetting mozilla-based environments).
My implementation isn’t complete yet, but I have started google project JSTAL – you’ll find more info on project wiki.

I don’t know if it works on Jaxer (because I’m waiting for Linux version), but it works well on other platforms that use Mozilla scripting engines (Helma, POW, Firefox2 and Rhino) so it should be OK. Please leave a comment if you gave it a try.

Here’s an example for you lucky Firefox 2 users: data and template code and rendering test, but remember that it’s meant to be used on the server, unless you target only Firefox users (or want to use it in a XUL Runner application).

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

Miłej lektury :)

<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]

This paper explores the idea that the universe is a virtual reality created by information processing, and relates this strange idea to the findings of modern physics about the physical world. The virtual reality concept is familiar to us from online worlds, but our world as a virtual reality is usually a subject for science fiction rather than science. Yet logically the world could be an information simulation running on a multi-dimensional space-time screen. (…) Modern information science can suggest how core physical properties like space, time, light, matter and movement could derive from information processing. Such an approach could reconcile relativity and quantum theories, with the former being how information processing creates space-time, and the latter how it creates energy and matter.

Very interesting paper – if you like when philosophy meets physics (quantum theory), go read it(pdf link)

[via boing-boing]