Tag Archives: html

CSSOM – CSS Variables, Nesting & Modules

Posted on by

This excites me, some proposals for CSSOM (better CSS value access from the DOM), variables, modules and nesting. This means you’ll be able to do stuff like this:

@var header-color color #006;
@var main-color color #06c;
@var secondary-color color #c06;
a { color: var(main-color); }
a:visited { color: var(secondary-color); }
h1 { 
  color: var(header-color);
  background: linear-gradient(left,var(main-color), transparent 25%);
}

See the full presentation here: http://www.xanthir.com/talks/2011-01-12/slides.html

Tip: use the arrow keys to navigate..

via Tab Atkins Jr. member of the CSS3 working group.

Unicorn – W3C Universal Validator

Posted on by

Unicorn – Universal Website Validator is a nice new validator tool from the W3C that runs their suite of tests on your site, checking for accessibility and standards compliance.

Try it out for this site! – lots of CSS errors due to my use of vendor specific prefixes, which I personally think, used with caution, should be let through.

Also try out the Mobile Conformance option for an overview of how well your site conforms to mobile device best practices.

Site Seeing – Week Four

Posted on by

Google Font Directory

https://fonts.google.com/

Bit late to the party with this one, but the Google Font Directory has some great open source fonts that can be included in your webpages incredibly easily. They host the whole solution and it’s a few basic lines of CSS to get some fancy fonts on your site. My personal favourites include Inconsolata and Lobster.

Experimental Gummy Bear Surgery

http://www.likecool.com/Experimental_Gummy_Bear_Surgeries–Other–Gear.html

Some great gummy bear transpants!

Experimental Gummy Bear Surgeries

Experimental Gummy Bear Surgeries

For Zebras

http://spudcomics.com

Think the photo says it all, check out Spud Comics for more.

For zebras it's not a party until someone brings the barcode scanner cartoon

by Lonnie Easterling

Fullscreen HTML5 Video in Safari via JavaScript

Posted on by

In Safari 5 HTML5 videos played in the <video> tag can now be made fullscreen, if you’re using the default controls then a button is available, but if you’re overriding them with a custom control you can use:

webkitEnterFullScreen();

This needs to be called on the video tag element, for example, to fullscreen the first video tag on the page use:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

Site Seeing – Week Three

Posted on by

Css Desk – An Online CSS Sandbox

http://cssdesk.com/

A great web app for playing around with HTML and CSS in the browser, would be interesting to see if it works on the iPad.

Pictaculous – A Colour Palette Generator

http://www.pictaculous.com/

Pictaculous (from MailChimp) lets you upload or email a photo and then generates a colour palette from it. You can email (color@mailchimp.com) straight from your iPhone and get a reply complete with your colour palette results. It also suggestion palettes from kuler and COLOURlovers.

A Comparison of Dedicated Servers By Company

http://www.intac.net/

This chart from Intac shows the ridiculous amount of servers Google are estimated to have:

Chart showing the comparison of dedicated servers

Who owns the most servers?

You made it this far, have a song – Metronomy – You Could Easily Have Me (spotify)