Search for ‘CSS techniques’

There are 50 entries matching ‛CSS techniques’:


  • JavaScript-enhanced image replacement

    Most image replacement techniques work by displaying a background image of text and shifting the real text out of view which is fine unless you have images turned off. This can be addressed with some unobtrusive JavaScript.

  • Ajax and accessibility

    There have been some great articles published recently on the accessibility of Ajax and DOM scripting.

  • Pushing CSS

    Introducing Position is Everything and CSS Destory, a couple of CSS resources exploring bugs and extremes.

  • CSS & Accessibility

    Here’s something that’s been playing on my mind recently. What role can CSS alone play in making websites accessible?

  • Transparently brilliant

    There’s a fabulous new design in the CSS Zen Garden which makes use of a clever transparent PNG effect.

  • Web Essentials 04

    Web Essentials 2004 looks to be an inspiring conference on Web standards, and a really good excuse to travel to Syndey late September/October. The conference will cover the key aspects of web standards: accessibility, markup (HTML/XHTML) and presentation (CSS). The…

  • The user-centred aesthetic

    So far this year, my regular reads on the Web have covered techniques in all the disciplines required to create quality web sites. All the disciplines bar one, that is. What’s missing? The visual design; the look; the skin; the surface. While the folks I’ve been…

  • Normality returns

    Thanks for your support. I don’t normally get political here at Clagnut, and even less often do I get angry and sweary, so I thought I’d show any new readers what I normally write about, by way of a top ten most visited posts this fortnight.

  • HTML is better than XHTML

    Judging by the latest SitePoint TechTimes, it seems Stuart Langridge has won the argument. SitePoint’s DHTML book will be published with HTML.

  • Speaking on typography at SxSW 2007?

    This year, SxSW Interactive is enabling attendees to vote for panels to be featured in the conference. I’m hoping to present a talk with Mark Boulton called Web Typography Sucks. The Panel Proposal Picker Round Two is now live, so get your votes in!

  • Web Typography is now open source

    In December 2005 I launched the Elements of Typographic Style Applied to the Web, a practical guide to web typography using Robert Bringhurst’s book “The Elements of Typographic Style”. The site needs updating, so I’ve now open sourced it on Github.

  • Interface widgets

    Christina Wodtke has created Widgetopia, a collection UI elements, and discusses solving user interface problems – by best practice or common practice?

  • A free font success story

    A free font has made it into MyFonts’s top ten list of best selling typefaces. There’s a lesson there somewhere.

  • CSS and Ajax Workshops

    Clearleft is doing a couple of public workshops at the end of January, here in Brighton. Andy Budd and Jeremy Keith will be training folk on CSS Mastery and Bulletproof Ajax respectively. Also check out Web Directions North conference.

  • How to size text using ems

    Text for the screen is sized with CSS in terms of pixels, ems or keywords. Pixels is easy, keywords are well documented. That leaves ems. I will now attempt to show you how ems can be as quick and easy to use as pixels.

  • Form layout

    Semantically speaking, should we be using tables to lay out forms, or should we be using some other mark-up combined with CSS? There arguments for both, but I reckon the most flexible answer is hidden in HTML 2.

  • How to typeset a date range properly

    During these 10 days of mourning following the death of the Queen, wherever you look – on websites, billboards and shop windows – we are presented with a badly typeset date range: 1926 – 2022. Here’s how to do it correctly.

  • Leading type designers love webfonts

    At Typ09, FontShop put together Webfonts Week, a series of interviews with leading type designers. There is universal support for webfonts now, even from those who were dead set against it a year ago.

  • Facing up to Fonts this Friday

    This Friday, 24th October 2008, I’ll be presenting as part of Head, a three-day global web conference. My talk is entitled Facing up to Fonts in which I get to talk more about web typography for the first time in ages. Update: Win a ticket!

  • Quiet around here, isn’t it?

    Well it’s the usual reason – so much stuff, so little time. There’s two projects, two books and then my arch nemesis pops up.

  • Whatever happened to font-stretch?

    The font-stretch property was removed from CSS2 in the transition to CSS2.1. Unfortunately this leaves us with a rather gaping hole in overall font support.

  • jQuery for UX Designers

    I’m giving a virtual seminar on using jQuery in interactive wireframes. As a UX designer, it’s the course I wish had been available to me a few years ago.

  • Font optical sizing bug in Safari 16

    In my previous post I extolled the virtues of Literata’s font optical sizing, in particular how it worked automatically in the browser. That is until the release of Safari 16 with macOS Ventura. Here’s how to work around the bug.

  • Variable fixed width layout

    There’s a different approach to web page layout which is gradually getting some traction. The idea is that the layout is changed to best accommodate the window size.

  • A couple of accessibility studies

    One by Joe Clark on screen-reader usability at a redesigned, standards-compliant e-commerce site. The other by Russ Weakley and Roger Hudson on the real world interpretation of HTML table mark-up by assistive devices.

  • Centering text on the longest line

    The Web Typography project continues to proceed, albeit at a glacial pace. One of the reasons for the slow progress is guidelines such as this: “verse quotations should be centered on the longest line”.

  • Preventing too-short final lines of text blocks

    At the end my previous post, I said I’d settle for direct control over widows and orphans in text blocks. It turns out not to be quite as a simple as one might think, with lots of discussion over the years. I created an experiment to test a solution.

  • Avoiding groupthink: fine-tuning CSS specifications

    Every now and then I’m asked to help out the CSS Working Group, especially when typography is involved. Invariably it’s also a chance to learn, not just about upcoming CSS, but also new methods of collaboration and group decision making.

  • An end to typographic widows on the web

    Currently shipping in Chrome Canary, and thus soon to be in Blink-based browsers including Edge, is a relatively new CSS declaration which promises to virtually end typographic widows.

  • WebKit now supports CSS @font-face rules

    Earlier this week it was announced that WebKit now supports CSS @font-face rules. There has been a mixed reception in some quarters, but this leap forward (for that’s what it is) has to be a good thing.

  • Upcoming changes to the CSS you need for variable fonts

    Two weeks ago I was invited to Berlin for a CSS Working Group meeting. One afternoon was dedicated to resolving issues with the CSS Text and Font modules. Two resolutions in particular will affect the CSS we need to work with variable fonts.

  • More on fixed widths

    Fixed versus liquid design is an emotive debate. Liquid layout seems more intuitive, appropriate and elegant but is not without issues. However many concerns can be addressed with little or no compromise.

  • Font-weight is still broken in all but one browser

    There’s more to the lives of many typefaces than just Bold and Regular, but almost no browsers follow the proper CSS 1 way of specifying Light, Semibold, Black and other weights. There is a workaround, but it’s nasty.

  • Fontdeck is go!

    I’m extremely proud to say that two weeks ago Fontdeck opened its doors to the type-loving public. It’s been a long time in coming – too long I’d admit – but Fontdeck is now live and I’m hugely excited about what’s to come.

  • A new year, a new design

    To my surprise, Clagnut.com was last redesigned in September 2008. Well, it’s all change, with a new redesign launched today. It’s been created from the typography outwards, responsive from the beginning and elegant on huge as well as tiny screens.

  • Getting started with variable fonts

    Variable fonts are a new font format offering unprecedented flexibility. They will be landing in web browsers and native operating systems within 12 months. Learn how to try them out now.

  • Web Typography panel at SxSW

    I’m proud to have been part of the Web Typography panel at SxSW 2009 alongside Jon Tan, Ian Coyle, Elliot Jay Stocks & Samantha Warren. I’ve jotted down some of the topics we discussed, and some we talked about beforehand but didn’t have time for.

  • Why I haven’t bought anything from iTunes

    As yet, I haven’t bought anything from the iTunes Music Store. The reasons for my ambivalence to iTMS are threefold: value, tangibility and information. Let me explain…

  • Professional body for web designers

    Mark Boulton has written a thoughtful post on having a professional body for web design. I commented in detail there, but I wanted to expand my thoughts on the subject, particularly on certification and the need for such an organisation.

  • All you need to know about hyphenation in CSS

    Automatic hyphenation on the web has been possible since 2011 and is now broadly supported. There is however far more control available to designers than just turning on hyphens. Updated January 2023.

  • Use rems for global sizing, use ems for local sizing

    An unedited extract from my forthcoming book, Web Typography. This chapter is quite technically focussed and hopefully stands well on its own. The other chapters I’ve written contain much higher proportion of typographic theory.

  • How to use variable fonts in the real world

    Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way.