-
Workshops | dConstruct 2009
Workshops | dConstruct 2009 — Early bird tickets have just gone on sale for this year's dconstruct tickets at £345. I am running an HTML5 and CSS3 workshop with Richard and Jeremy. "HTML5 and CSS3 may be considered by some as distant concepts: far in the future and irrelevant to their daily lives. However, in this day-long workshop by Clearleft's expert client-side engineers Richard Rutter, Jeremy Keith and Natalie Downe, you will learn how these exciting new concepts can be applied today!".
-
Styling buttons to look like links
A common mistake that many developers make is to use a link to trigger an action on the server, for example deleting an item from a shopping basket or adding something to your favourites. Both of these examples are actions that modify state on the server and should therefore be performed using '
post'.However, sometimes even developers who know that is wrong to use a link where they should be using a form, get sucked in to doing so when the design requires a button to look like a link.
Please note that I am definitely not encouraging the redesign of button elements to look like links. I believe that we shouldn't mess too much with browser defaults for functional things like form controls, scroll bars and the like. That said, sometimes you just have to build what your designer tells you to.
It actually isn't hard to make a submit button look like a link using CSS so you should never find yourself in a position where you have to sacrifice forms for links purely for the sake of the design.
Firsly the markup: although you can use an input
type="submit"as a submit element and this example would work in the same way, the button element is, in my opinion, a much better option. It is really flexible and can have a variety of different elements nested inside if you so choose, from simple text with an image right through to headings and paragraphs. This article on buttons by Aaron Gustafson back in 2006 is still fairly relevant today and explains some of the uses the humble button element can be put to.Another useful article also from a while ago explains the techniques that Wufoo use to style links to look like buttons. The really important thing to take away from this article is that putting
overflow: visibleon a button fixes the crazy width issue that IE likes to deal us.I have posted a simple demo for you to follow along in your browser. For the purposes of this example the markup will be:
<form action="#" method="post"> <p><button type="submit" class="link"><span>Hello there I am a button</span></button></p> </form> <p><a href="#">That's nice, I am a link</a></p>The basic page in this demo has the following styles applied to the links and body:
body { font-family: "Verdana" sans-serif; } a:link, a:visited { color: blue; } a:hover, a:focus, a:active { color: black; }Next I add the magical incantation to kick the width in IE for all buttons:
button { overflow: visible; width: auto; }I have added a class of link to the button that I wish to style as a link element and the basic styles that I apply to this are the colour and font family (the button seems to inherit system font settings), as well as over-riding the button defaults with regards to border, margin, padding and background.
The default cursor for button elements is a regular arrow. I normally set
cursor: pointerfor all button elements to ensure the user knows they are clickable. This makes even more sense for buttons that are pretending to be links.button.link { font-family: "Verdana" sans-serif; font-size: 1em; text-align: left; color: blue; background: none; margin: 0; padding: 0; border: none; cursor: pointer; }Interestingly, Mozilla won't let you select the text of the button element like other browsers will, so to override this and enforce that the user can select the text of our psuedo-link, you can apply the following as well:
-moz-user-select: text;You can also choose to override all your other button styles if there are any.
Now you almost have a link. Those of you paying close attention earlier on will have noticed an as yet unexplained inner span to our button. This is because it does not appear to be possible to set text-decoration on a button directly and depending on how you have your link styles set this is something you are likely to want to do.
The text-decoration: underline rule is actually applied to the span on hover or focus of the button. This way is more flexible if you choose at some point to add or remove an underline on hover.
button.link span { text-decoration: underline; } button.link:hover span, button.link:focus span { color: black; }Naturally everybody's 'favourite' browser, Internet Explorer six will not display the hover effect on your link because it doesn't 'do' hover on arbitrary elements, only on actual links. You can fake this effect with Javascript if you really wish, adding a class on hover and removing it on mousout. Other limitations of this technique are that selection of text looks a bit dodgy in all versions of IE.
My example above is very simple. If you wath a button that appears in flow with text as a link, for example the delete link on a shopping basket item in this example, you will also need to apply '
display:inline' to both the form and any block level elements inside.So there you have it, no excuses now — go forth and use the correct HTTP method!
-
Practical, maintainable CSS
Continuing my new years resolution to get better at public speaking, I have now given two talks in 2009 and am signed up to two more. It really does get easier! The last one I gave was (in hindsight) really quite fun.
Last Wednesday I spoke about what I do to the Girl Geeks of Brighton at the Eagle. An event with a good community atmosphere and fantastic food, there were lots of new faces there too.
Here are my slides from the event, they contain some of the same material to my Barcamp presentation however its much more from a practical perspective aimed at an audience with a variable base level of knowledge in CSS.
If you are interested, the slides with notes are available online. I also used Silverback to record the presentation.
Video on Vimeo
Slides on Slideshare
If you see me about at SxSW next week, come and say hi :)
-
CSS Systems for writing maintainable CSS
I gave a talk this morning at BarCamp London 5 about CSS Systems, a new term that I am using to define a top-down approach to architecting a site's CSS.
A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code.
The talk elaborates on this concept, and also describes a number of tricks I use to preempt maintainability issues.
You can view just the slides on SlideShare, but as they might not make sense out of context you can download a PDF of the slides with notes for the complete experience.
-
HTML 5 working draft
HTML 5 working draft — The HTML 5 working draft was released relatively quietly just the other day.
-
Sangeeta asks the CSS Guy how to create a table like Orbitz's airline flights scheduling and pricing matrix (Ask the CSS Guy)
Sangeeta asks the CSS Guy how to create a table like Orbitz's airline flights scheduling and pricing matrix (Ask the CSS Guy) — Using tables cunningly.
-
Styling File Inputs with CSS and the DOM // ShaunInman.com
Styling File Inputs with CSS and the DOM // ShaunInman.com — a little bit hacky but pretty smart.
-
HTML5, XHTML2, and the Future of the Web
HTML5, XHTML2, and the Future of the Web — "HTML5 will be the future of the web" - I have recently taken a turn away from XHTML to HTML (semantically written still of course!).
-
Unobtrusive connected select boxes - yet another solution approach - Wait till I come!
Unobtrusive connected select boxes - yet another solution approach - Wait till I come! — nicely implemented connected selects.
-
Technorati Weblog: Introducing Three New Widgets From Technorati: Top Searches, Top Tags, and Authority
Technorati Weblog: Introducing Three New Widgets From Technorati: Top Searches, Top Tags, and Authority — "We took three things on our site which bloggers have been requesting for quite some to include on their own sites, and wrapped them up into nice and tidy HTML widgets".
-
HTML Working Group
HTML Working Group — Charter for the HTML working group.
-
W3C restarts HTML effort
W3C restarts HTML effort — Article on how to apply to the w3c to participate in the development of HTML.
-
A List Apart: Articles: Where Our Standards Went Wrong
A List Apart: Articles: Where Our Standards Went Wrong — Ethan has an interesting article on the practicalities of standards. Personally, growing older meant that I validate others' code less, mainly so that I am not disappointed.
-
Why “Conditional Comments” are bad, repeat: bad – Jens Meiert
Why “Conditional Comments” are bad, repeat: bad – Jens Meiert — I disagree with this article, at some point I will explain in more detail why.
-
A Guide to CSS Support in Email - Campaign Monitor Blog
A Guide to CSS Support in Email - Campaign Monitor Blog — HTML email reference.
-
SitePoint Blogs » Microsoft Breaks HTML Email Rendering in Outlook 2007
SitePoint Blogs » Microsoft Breaks HTML Email Rendering in Outlook 2007 — REALLY bad news if you are forced to make HTML emails, if making them wasnt bad enough this will top it off.
-
Digital Web Magazine - Markup as a Craft
Digital Web Magazine - Markup as a Craft — "The quality of your markup will affect the quality of related code, and even the cost of implementing or maintaining that code.".
-
Nabuur - expandable form fields in the wild
Nabuur - expandable form fields in the wild — Site to aid charitable works through use of the skill set of the contributor, good cause. Also nice use of expandable form fields in the wild. Would be better if it had some restriction as to how big the fields could get, or just allow text areas ind stan.
-
geo - Microformats
geo - Microformats — Something I must look into at some point, now on the shelf of things to play with ...
-
Rich text editor
Rich text editor — .
-
HTML Playground, html, css reference by example
-
On having layout — the concept of hasLayout in IE/Win
-
24 ways: DOM Scripting Your Way to Better Blockquotes
-
Nikita the Spider * Bulk/Batch HTML Validation, Link Checking and More
Nikita the Spider * Bulk/Batch HTML Validation, Link Checking and More — .
-
Markup Maker - Takes a simple list of page ids that you enter and converts it to a valid XHTML document | Developer Tools | Accessify
-
Order Now Hand-coded Markup for your Design by PSD to HTML service, PSD2HTML.com
Order Now Hand-coded Markup for your Design by PSD to HTML service, PSD2HTML.com — .
-
Happy Cog Studios: Zeldman Video Keynote
-
bobbyvandersluis.com | Ten good practices for writing JavaScript in 2005
bobbyvandersluis.com | Ten good practices for writing JavaScript in 2005 — .
-
Vitamin - A resource for web developers, designers and entrepreneurs
Vitamin - A resource for web developers, designers and entrepreneurs — .
-
Nice titles
Nice titles — .
-
Rounded Corners with CSS and JavaScript [JavaScript & DHTML Tutorials]
Rounded Corners with CSS and JavaScript [JavaScript & DHTML Tutorials] — .
-
Fizbang Web Design » How to Improve Your Logo
-
mad4milk : scroll your internal links smoothly
-
A List Apart: Articles: Dynamic Text Replacement
-
Download details: Internet Explorer Developer Toolbar Beta
Download details: Internet Explorer Developer Toolbar Beta — finally! the quest is over.
-
hcalendar - Microformats
-
Simon Willison: Executing JavaScript on page load
-
Enhancing Structural Markup with JavaScript [JavaScript & DHTML Tutorials]
Enhancing Structural Markup with JavaScript [JavaScript & DHTML Tutorials] — .
-
Javascript - Introduction to Events
-
Top 10 custom JavaScript functions of all time
-
scottandrew.com
scottandrew.com — .
-
A List Apart: Articles: Cross-Browser Variable Opacity with PNG: A Real Solution
A List Apart: Articles: Cross-Browser Variable Opacity with PNG: A Real Solution — .
-
mezzoblue § A Bit of Transparency
-
Chris Holland: The Blog.: Banks: Protect Privacy: Disable Autocomplete with Valid HTML
Chris Holland: The Blog.: Banks: Protect Privacy: Disable Autocomplete with Valid HTML — .
-
Autocomplete feature of Internet Explorer
-
Accessible interdependent dropdowns
-
Code_Punk - Beginning JavaScript Lesson 25 - Dynamic CSS Using "getElementById"
Code_Punk - Beginning JavaScript Lesson 25 - Dynamic CSS Using "getElementById" — .
-
Rasmus' 30 second AJAX Tutorial - lunatechian (lunatech-ian)
Rasmus' 30 second AJAX Tutorial - lunatechian (lunatech-ian) — .
-
ColourMod » DHTML Colour Picker
ColourMod » DHTML Colour Picker — exceeeedingly cool colour picker.
-
HTML HTML Quick List - HTML Code Tutorial
-
CollyLogic: Image fades for overflow: auto
-
Ten more CSS tricks you may not know
-
doxdesk.com: software: minmax.js
-
Paged media
Paged media — .
-
Unicode
Unicode — .
55 items tagged "html"
Look at "html" on del.icio.us, Flickr or Technorati