Link

I’ve been working for a short while on a project called BaCSS (pronounced “base”). It’s a stylesheet that is just that, a base set of styling for anything you’re building. It will add styling and layout to any site with a common HTML (including HTML5) structure.

I’d love to hear any feedback you have on the project (good or bad!), check it out!.

Text

Google Chrome 6’s new HTML5 features

With the recent release of Chrome 6 comes an update to it’s HTML5 support, here’s a run down of the new features supported.

You must, of course, be either using Chrome 6 or a browser that supports these features to view the demo’s. Check if your browser does.

The Hidden attribute

This does exactly what it says on the tin, really. Attaching it to an element will hide it, as far as I can discern, exactly the same as CSS’ display: none.

<h1 hidden>This will be hidden</h1>
The Mark element

This element seems to be aimed at use in collaboration. It allows you to highlight part of a string of text to users. It could be particularly useful for semantic highlighting of search results. Altogether, a very small, but very useful element. Example.

<p>A <mark>really useful</mark> part of a paragraph.</p>

The Mark element

The Progress element

Another element that does exactly what you’d expect it to, pass it a max and value attribute and the progress of a task will be displayed. Example.

<progress max="100" value="25"><span>0</span>%</progress>

The Progress element

The Meter element

This element is much like <progress> without the constraints of display progress. I’d propose that its primary usage would be in displaying progress towards a goal or limit. The element must have a maximum value so usage for things such as height or weight would not be applicable.

There is also low, optimum and high attributes to highlight where the optimum level in the meter is. The colour of the meter will be adjusted to display how close the value is to the optimum. Have a play around.

<meter min="0" max="100" low="25" high="75" optimum="50"​​​​ value="55">​​​​​​​​​​​​​50 out of 100</meter>​​​​​​​​​​​​​​​​​

The Meter element

EventSource (push notifications)

This one’s pretty cool. You can now send push notifications by updating an external file. The code will check the file on a regular basis and if there’s content in it, that will be pushed through. The spec gives a good explanation of why this could be preferable to AJAX.

Using this API rather than emulating it using XMLHttpRequest or an iframe allows the user agent to make better use of network resources in cases where the user agent implementor and the network operator are able to coordinate in advance. Amongst other benefits, this can result in significant savings in battery life on portable devices. This is discussed further in the section below on connectionless push.

I’ve set up a small, simple example (will be made betterer when I find the time.

FileReader

I was unsuccessful in setting up a test for this feature but the general gist is that it will allow you to interact with files via JavaScript. You will only have access to files that the user has elected to upload for security reasons, obviously.

Definition from the spec:

Web applications should have the ability to manipulate as wide as possible a range of user input, including files that a user may wish to upload to a remote server or manipulate inside a rich web application.

Conclusion

This post will be update with better examples hosted on Github in due course but I hope this is a good eye-opener for what’s to come.

As always, grab me on twitter if you need anything clarifying or just have any questions.

Link

The Entitifier is a little tool that will convert any characters in text or HTML pasted to the correct HTML entities. It’s great for ridding documents clients have sent you of those horrible Microsoft Word quotes (and will even replace the relevant characters with the correct typographic entities).

There a couple of issues so if you have any Ruby knowledge, I’d welcome any help on github.

Text

Semantic Tooltips With Pure CSS3 and HTML5

This technique is so simple that I’m really surprised nobody has come up with it before, please shoot me link if they have but I couldn’t find anything after some extensive Google action.

Currently, most people use something like this to produce a pure CSS tooltip:

<a href="#">Title <span>Tooltip</span></a>

(Code from CSSGlobe)

But this is another extraneous element in our HTML and won’t really make much sense to screenreaders so let’s try to produce a more semantic solution.

See it in action

The solution lies in the title attribute and CSS’s content property. We can use the attribute to dynamically insert the text with CSS. The HTML is as basic as you like:

<p>I <span title="I mean really, really" class="tooltip">really</span> like pie.</p>

Using CSS’s content property, we then produce some content after the span like so:

.tooltip:hover:after {
     content: attr(title);
}

HTML Dog has a list of what we can use with the content property.

Our tooltip will now show up when we hover over the span. We should probably make it a bit more visible.

.tooltip {
    border-bottom: 1px dotted #333;
    position: relative;
    cursor: pointer;
}

.tooltip:hover:after {
    content: attr(title);
    position: absolute;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
}
Looking to the Future

With HTML5 finally allowing custom attributes, we can make this even more semantic.

<p>I <span data-tooltip="I mean really, really." class="tooltip">really</span> like pie.</p>

You can read more about HTML5 custom attributes at JavaScript Kit.

You will then need to change the CSS to:

.tooltip:hover:after {
    content: attr(data-tooltip);
}
Text

Understanding CSS3 box-sizing

There has long been a debate about how the box model should work. The developers of IE5 chose to exercise their creative license and use a model that differed to the official W3C specification of the time. Many believed that the IE model made more sense and in this article we’re going to explore the differences and see what we can do about it in CSS3.

Know your box model? Skip ahead, sparky!

Something About Boxes..?

I find it often helps to think of the box model along the same lines as wrapping up a mug as a gift.

  • You start with the mug (or the content, in our case).
  • You then add some packing peanuts (this is our padding).
  • After that, you put all of that in a cardboard box (our border).
  • Finally, you wrap it all up in some nice wrapping paper (our margin).

As is commonplace, we’ll demonstrate this with a hideously Photoshopped mash-up of pictures:

The CSS2.1 Box Model

So, What’s the Problem?

The problem is the differences between the two box models that were eventually implemented. The official specification states that the width and height should be calculated by the actual size of the box content. Microsoft decided in IE5 that the width of the element should be determined by the content, padding and borders and that created some discrepancies.

As you can see, the difference in width calculations could cause havoc and break layouts.

box-sizing

Now, with CSS3, we have a choice of which box model to use. The box-sizing property allows you to select your flavour.

box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;

The code above will give you the specification based width and height calculations.

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

The border-box value will give you the IE5 calculation method.

When Will I Ever Use This?

I actually think the IE5 method makes a lot of sense in some situations and becomes really useful when we’re trying to increase the readability and reusability of our CSS.

div {
    box-sizing: border-box;
    width: 200px;
    border: 5px solid #000;
    padding: 2px;
}

The div in this example will be 200 pixels wide no matter how you adjust the values of the border and padding properties.

div { box-sizing: content-box; /* This is the default layout but I’ve included it here for readability */ width: 200px; border: 5px solid #000; padding: 2px; }

This div will be 214 pixels wide (200 (width) + 10 (border) + 4 (padding)).

I would primarily use the border-box (IE5 method) box model for layout as it creates rock solid dimensions for your elements. Using it for anything other than that may end up getting complex and confusing.

I’ve set up a little demonstration page. It’s worth bearing in mind that box-sizing will also work with min and max height and width.

If you’re really interested in box-sizing, James Hopkins has a great write-up on the ins and outs.

What are your views on box-sizing and the box model?

Text

Using abbr on Touch Devices

The situation with the :hover pseudo-class on touch devices is well documented and something that simply requires a different approach. The abbreviation HTML tag, however, is a different kettle of fish.

Simply putting the definition in brackets following the abbreviation is a possible solution (e.g. “HTML (HyperText Markup Language)”) but I’m a stickler for semantics and would prefer to use the tag built specifically for this task.

The solution I’ve come up with is probably as simple as solutions get but sometimes the best are.

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    $('abbr').each(function() {
        $(this).click(function() {
            alert($(this).attr('title'));
        });
    });
}

Will sort you out nicely if you’re using jQuery or you can use this vanilla JavaScript:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    var abbr = document.getElementsByTagName('abbr');
    for(i = 0; i < abbr.length; i++) {
        abbr[i].addEventListener('click', function() {
            alert(this.getAttribute('title'));
        }, false);
    }
}

The code is pretty self explanatory but for those that don’t understand it, here goes: Firstly, we check that this is a handheld device - I only needed to detect iPhone and iPod touch but Hand Interactive have a nice post about detecting other mobile browsers - we then gather all abbr elements, loop through them alert out their title attribute.

Text

Multiple Borders on Dynamically Sized Elements with CSS2

I recently saw a blog post on Nettuts on how to add multiple borders to elements with simple CSS.

This method has some flaws in that text may be rendered unselectable and links unclickable, I’m working on a fix but Nicolas Gallagher has a great alternative method in his article on Multiple Backgrounds and Borders with CSS2.1.

There was one significant problem with this method: you had to know the exact size of the element that you were going to add the effect to.

It is, however, possible to replicate the effect on dynamically sized elements using some just-as-simple CSS.

See it in action.

First, here’s the code Jeff presented:

#box {  
    background: #f4f4f4;  
    border: 1px solid #bbbbbb;  
    width: 200px;  
    height: 200px;  
    margin: 60px auto;  
    position: relative;  
}  

#box:before {  
    border: 1px solid white;  
    content: '';  
    width: 198px;  
    height: 198px;  
    position: absolute;  
}  

As you can see, the effect is produced by simply reducing the size of the :before content to fit inside its parent.

Here’s my approach:

div {
    width: 200px; 
    height: 200px; /* Added so the div has a size but not necessary */
    background: #F4F4F4;
    border: 2px solid #BBB;
    position: relative;
}

div:before {
    content: '';
    border: 1px solid #FFF;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1px;
    left: -1px;
}

We use 100% width and height so the :before content has the same width as its parent but by adding a 2px border to the parent, the size is increased by an extra pixel and therefore leaves room for us to place the second border inside using top and left positions of -1px.

This works because the W3C box model doesn’t count the border as part of the width and height of the element, only the content is taken in to account.

There is, however, one caveat: my method doesn’t support more than one extra border but hey, three’s a crowd.

Text

Coming up on An Innovative Web this summer

Just to whet your appetite slightly, here’s what’s coming up on An Innovative Web this summer.

The website is going to become completely self-hosted and rebuilt from the ground up including loads of great new features.

We’re going to conduct UX and UI case studies on large websites and help you give your visitors the best user experience.

A series on web design basics with a completely customisable experience. You will be able to learn at your own pace and via the method that suits you best, all for free.

We’re also delighted to announce our Summer of Experimentation where we’re going to push the limits of what HTML5 and CSS3 can do. Pure CSS 3D text is just an example of the experimentations that will be popping up on a regular basis.

So plug the feed in to your newreader and get innovative!

Text

SaveTabs Safari Extension

I seem to be getting some kind of Safari Extension development bug. This extension fills a gaping hole in Safari’s functionality—it saves all open tabs in the current browser window and allows you to reopen them whenever you want, even across restarts of the browser.

This is a really inelegant solution but the APIs open to extensions are pretty limited at the minute.

Clicking the save icon will save all tabs you have open:

You can then restart the browser or do whatever you want, your session will be saved.

To reload the tabs saved, click the load button (this will only be enabled after you’ve done something off tab after a save i.e opened a new tab or navigated to a different one):

Please note that a new save will overwrite previous ones and it is currently only limited to one browser window (but I’m working on that one).

Download version 0.1

As always, you can find me on Twitter if you need any help or come across any bugs.

Enjoy!

Text

Send to Tweetie 0.4 and Send to LittleSnapper 0.3

Thanks ever so much to everyone that’s downloaded the extensions, I’m glad to hear that so many people are enjoying using them. After a few suggestions and bug reports there are now new versions of both extensions.

Send to Tweetie
  • Bug which resulted in an empty Tweet - not fixed but temporarily resolved by removing the title from the tweet. This will be back soon and enhanced with tweet layout customisation.
  • New toolbar icon.
  • Added plugin icon.
Download version 0.4 Send to LittleSnapper Download version 0.3

I’m having some problems with Safari’s automatic updating but this should be working again soon, keep clicking that update button!

Thanks again to everyone. Don’t forget to tweet me if you need any help.