Ever wanted to use the semantically correct HTML SUP tag for superscript but not been able to get the styling right? Well if you thought you’d “just fix it during lunch-break” like I just did, but ended up still fint-tuning the presentation an hour later, have a look at this superscript fix. It’s basically a default over-ride, then styled relative to the parent text. Exactly what you’d want. And still leaves you time for lunch.
This HTML5 presentation is an easy to understand and exciting introduction to sensibly applied HTML5 techniques. Obviously there’s little point in viewing it in anything other than Chrome or Safari, or possibly Firefox 3.6, but if you can see it all then it offers a great demonstration of modern HTML5 capabilities. In Chrome on the Mac it did seem to stutter a little so there’s clearly still a few performance issues even in the most advanced browsers, but applied in a manner that degrades appropriately in other browsers there’s no reason not to start applying these techniques today.
I’ve just recently been tipped off about this CSS3 generator site and having had a chance to play around with it I’ve found it a very compelling way of trying out CSS3 effects. CSS values can be edited and are applied in real-time for as live preview of how the effects will appear, and most importantly you’re continually reminded which browsers will or won’t render the effects. Check out CSS3 Please.
I enjoyed reading this 15 CSS Tricks That Must be Learned post and think it’s a valuable resource. Whilst I agree with some of the comments that none of the tricks are anything new [nor does the author claim them to be], there are so many CSS workarounds that experienced developers use daily, some of which are incrementally developed over time, that it’s often handy to have a visual refresher such as this to remind ourselves why we apply such tricks. And any young pups out there for whom the tricks are still new could do a lot worse than to start with this set of essential but well-explained suite.
The Quirksmode Compatibility Master Table is so handy that it often gets overlooked as blog-worthy, maybe because it’s assumed that it’s already in everyone’s CSS toolkit and daily practice. Along with A List Apart, these are two CSS resources that are almost everyday visits when CSS coding. However, an interesting new service might help minimise some of the reasons for visiting those two essentials. The IE6Fixer offers the ability to automatically analyse your CSS and provide known fixes that should help with IE6 compatibility. The site clearly states that it’s not a one-stop fix, but might be of help in short-cutting the often similar steps we have to go through to make things work properly in IE6.
We’ve blogged about this before but having adopted the 960 grid system for the majority of our web designs for some time, the resources at 960 Grid System look invaluable. To have ready-to-go templates for Fireworks, Inkscape and OmniGraffle is excellent and ensures the consistency needed to move between design apps effectively, followed by easy transition into development using the supplied CSS.
Anyone who’s developed mobile internet sites will know that one of the biggest issues affecting the download experience is the latency often experienced when communicating via the operator gateway. This often means that no matter how fast the connection, device or the server, a noticeable and often unavoidable delay is created. However, a method using Base64 encoding could be used to circumvent this problem by, in simple terms, defining what would have been an external resource [requiring a request] in the form of a text string that can be embedded within a single file [such as a CSS stylesheet] and subsequently understood and decoded by the browser. As is often the case of course, any such trick often leads to other side-effects to be wary of - one such effect in this case being that of the browser cache limitations. However, in many scenarios, this method could introduce potentially significant experience enhancements to the overall page request time.
I know ‘modern’ web developers are meant to have this deeply ingrained in their pysche by now but I sometimes still find it helpful to refer to the W3 page on CSS selectors occasionally and invariably when I do it reminds me that there is always more than one way to do something [the unconsidered option so often being better too].
Whilst it’s not usually an issue, sometimes the dotted outline that is applied to links in their active state [e.g. the point when they're clicked] looks visually untidy - especially if you’re also using lots of padding or text-indent tricks to hide HTML text. The following article about removing the dotted outline is a great summary of how to overwrite this behaviour whilst also maintaining accessibility [a key reason for the active state in the first place].
Font-replacement methods for substituting text on-the-fly with a non web-safe font are widely used now. However, having had a few run-ins with the very popular Flash-based SIFR recently - either due to small glitches [especially Mac related] or simply due to it’s limitations in certain contexts [especially when used over backgrounds that are not solid colour] - we’ve been looking at other options. As a lightweight solution, PCDTR seems to be one of the best image-based alternatives due to it being purely PHP and CSS based [e.g. no Javascript] and we’ll be putting this through it’s paces in a forthcoming project.
I had a quick need to try some CSS styled bar charts to demonstrate a very rough prototype idea and this article on 8 CSS Techniques for Charting Data came in very handy. I can’t vouch for the long-term effectiveness, robustness or flexibility of any of the techniques but as a starting point for your own methods it’s a helpful start [if not rocket science by any means].
This simple CSS Shorthand Guide produced by Dustin Diaz is an invaluable resource and makes for good practice in streamlining your CSS code.
The Blueprint Grid CSS Generator is aimed at designers and developers utilising the Blueprint CSS framework. However, it is a very handy tool for calculating columns and gutters for any grid layout, regardless of the final development [though presumably with a little more searching there are other design-oriented tools specifically for this also].
The Blueprint framework seems to be fast becoming the preferred method of quickly desploying a grid-based design to a CSS based layout.
