An earlier post detailed how we can build a 100% CSS-based tab layout. While pretty cool and somewhat usable it had some flaws.
Most css coders are familiar with the basic descendant selector,
parent child and use it all the time, perhaps too much.
The descendant selector is applied to every single child of parent and that is not
always ideal.
A better solution in some cases is the direct child selector:
parent > child. The difference between this and the descendant
selector mentioned above is best explained with a nested list
Web fonts make it real easy to use almost any font on your website and that is good. But one thing that webmasters seem to not notice is that web font files are quite heavy and will easily outweigh the rest of an average web page.
As an examle, let's take a look at a new blog I set up recently, Fishing Base Blog. At the moment it uses WordPress' default theme which include the Open Sans font. I have added a background image (46kb) and tracking code for Piwik (21kb). The total size in kb for the frontpage is now 281.5 kb which is not bad by todays standards.
Continue readingSome people, for various reasons, use their keyboard instead of a mouse to navigate web pages. Since keyboards and mice interact differently with your website, your website doesn't necessarily work optimally for keyboard users if you have coded it with mouse users in mind.
A typical scenario is that a keyboard user jumps from link to link (with the tab key but depends on the browser). When that happens, the :focus state becomes active and the link is highlighted in some way by the web browser. This default highlighting, typically an outline, might not be as good as it could be so you should consider to do something about it.
Continue readingIt's christmas so what's a better thing to do for a CSS coder than to create a christmas tree?
Our christmas tree consists of a tree trunk, three sections of branches with it's own decorative band and a star at the top. I think that can be represented quite well with this html code:
Continue readingA common design for a widget is a thin border and a caption with a background color that spans the whole widget. This is commonly acheived with something like this:
Continue readingThere are many available solutions for creating a tabbed interface on a webpage. Most of them have in common that they are using JavaScript and/or use a html structure that separates the headers from the content that they belong to. What we aim to do here is to build a tabbed interface from a set of widgets, without changing the document structure. Let's start with some html code:
Continue reading