Ten Tonne Baby!

Where's Mama?

Archive for the css tag

• Not sure I like CSS3 transitions

  One of the modules put forward in the proposed CSS3 specification is the transitions module. This adds a bunch of new CSS attributes which control the animation of property values over time, including everything you would expect (such as easing functions, speed, delays, repetition etc).

  I know there are many grey areas where it’s hard to decide if something is really behavioural (so should be covered via javascript) or presentational (in CSS). I can’t help feeling that this is taking CSS too far into trying to accommodate behaviour. After all, mostly what we do with javascript is about changing the state of the DOM, which causes the browser to re-render with the change applied.

  There are many problems that would need to be solved well in order for this to be viable, which are currently very simple to achieve in javascript using a decent library. These include…

  • Managing multiple independent animations on an element
  • Animating multiple elements simultaneously
  • Cancelling all active animations on an element
  • Transitioning either from the current value of a property, or from an absolute value
  • Chaining animations (so when animation X finishes, trigger animation Y)

  I think my other objection is simply that all of this is currently achievable in quite a simple way using existing web standards, and libraries built on top of those standards. I think deciding how to change a property over time is behavioural, not presentational and should stay in the realms of javascript. Given this, the only thing to consider is whether to extend the core DOM specification to standardise some of the behaviour that is currently provided by javascript libraries.

  Personally I don’t quite see how this progresses anything – it will just add another way to achieve something we can do already and add inconsistency and confusion around how to approach animation.

  Posted:

  February 12, 2010 @ 11:27

  Categories:

  Development

  Tags:

  animation, css, css3, web standards

  Comments:

  No comments so far

• Previews of implemented CSS3 functionality

  Although still a work in progress, I hadn’t realised how many of the proposed CSS3 features actually already have some kind of basic implementation in the latest set of browsers. Check out this page which provides live demonstrations of some of the more exciting proposals.

  I think the major things I’m looking forward to are…

  • Ability to specify multiple background images on the same element – so no need to add superfluous elements as styling hooks
  • Multi-column layout – allowing text from a single element to visually flow into multiple columns, much like a newspaper layout
  • Decent support for RGBA – so being able to specify the alpha channel when setting a background colour. This avoids having to cut PNG images in order to achieve a semi-transparent background.
  • Support for specifying colours in terms of Hue, Saturation and Lightness. Although I’m not quite sure how I’ll use this yet, I can imagine this would make animation of colours more intuitive – for example, using javascript to animate the amount of light applied to an element.

  The live examples are really worth looking at, and give a much better feel for what is coming up compared with reading a specification.

  Posted:

  December 17, 2009 @ 14:21

  Categories:

  Design, Development

  Tags:

  css

  Comments:

  1 comment so far

• CSS specificity for deprecated HTML attributes

  Today I had to plug a slightly strange gap in my knowledge – how old school HTML attributes apply to the CSS specificity resolution for conflicts. An example would be the border attribute specified both as an attribute on a table element, and with an element selector in a stylesheet.

  It looks like old school html attributes to control presentation are treated as the lowest of the low – so a duplicate instruction within any kind of CSS selector will be treated as more specific and win.

  I had at first assumed they would be treated with the same specificity as inline styles, but not so.

  Now you can sleep at night.

  Posted:

  November 23, 2009 @ 16:40

  Categories:

  Development

  Tags:

  css

  Comments:

  No comments so far

• Aural Media Type

  Having added a handheld, and print stylesheet to this site recently, I was thinking a little about the Aural media type. So CSS is all about presentation of content. The idea here was to be able to control how content is presented when read – so being able to specify that H1 elements are read in a booming, male, American voice etc.

  Although this is very appealing and a very cool idea, I just don’t think it makes sense. When looking at a page on screen, there are lots of visual cues that help you make sense of the content. This means that we can apply different presentation and design without leaving you confused about what you’re looking at.

  When content is read, one of the main clues you have to differentiate and make sense of content is how the content is read. This means it makes sense for different content to stick to the same presentation, or conventions, so that you can learn what those conventions are, and what they mean. If everyone has control over audio presentation of their content, there is no pattern to learn, and it must be much harder to switch from document to document while listening.

  Not that this really matters yet, but it may have more impact as there are more embedded devices with connectivity – so being able to listen to blog posts in your car etc.

  Posted:

  December 13, 2007 @ 9:24

  Categories:

  Personal

  Tags:

  aural, css, stylesheets

  Comments:

  No comments so far

• Wearing body armour to buy milk

  There’s been quite a lot of talk in the web development community recently (and a couple of books) about bulletproof techniques / design. The basic idea is to adopt techniques that are as robust as possible and cater for a wide variety of situations without breaking down.

  After reading a recent post, I was thinking about Image Replacement techniques in CSS and to what degree you need to take this approach – specifically in response to a technique where you add an additional empty inline element, size it to width: 100% and height: 100%, then set the background image on this element. The thinking is that with CSS on and Images disabled, you still get the text.

  That’s where I start to get edgy. CSS is about the visual presentation of content. I think it’s perfectly acceptable for a design to have dependencies on images applied via CSS to work well. Images applied via the CSS background-image are all about visual presentation of content. I can’t quite figure out who would surf now, want the visual presentation of content (i.e. CSS) but not want the images. I don’t think many people are constrained on bandwidth, and they always have the option of disabling CSS to get the raw content and nothing else.

  I think attempting to get the hybrid, crippled version of a design to work well is flawed. People have the option to get just the raw content, or the content with a visual design applied. Asking for a visual design without images?? Then adding extra markup to cater for it?? Sorry, don’t get it.

  Posted:

  December 4, 2007 @ 9:41

  Categories:

  Design, Development

  Tags:

  accessibility, css, image replacement

  Comments:

  No comments so far

• Transcending CSS

  In case you haven’t read about it, Transcending CSS is due for publication in the near future, and should be a really interesting read. I would pick this up if you’re interested in visual design for the web, or simply have to implement more interesting or complex visual designs.

  I’m currently reading the paper version of Joel On Software on recommendation from Martin. It’s quite addictive reading, and generally provides very good coverage of the main reasons why software projects go wrong, and the key things that you should ensure are put in place to avoid this.

  I think most people would benefit from putting on their humble shoes and reading this to reflect on their own practices and what can be improved. It’s also extremely enjoyable and easy reading, which is very hard to come by with technical material.

  Posted:

  November 20, 2006 @ 9:24

  Categories:

  Personal

  Tags:

  books, css, joel, reading, reviews

  Comments:

  No comments so far

• HasLayout in IE7

  The majority of freaky rendering behaviour in IE6 came down to whether the haslayout attribute was applied to an element. This was a speed optimisation in the rendering engine – certain behaviour was skipped when deciding how to render an element if haslayout was false to increase the efficiency of rendering a page. The result was that a valid set of CSS instructions would produce unexpected rendering behaviour in IE6 unless haslayout was true on certain elements.

  One of the hacks used to get around this was to apply height: 1px to an element (in a hacks file, served only to IE6 via conditional comments). As IE6 treated height like min-height, this would have no adverse behaviour, but would result in haslayout resolving to true for the element.

  This morning I came across my first strange rendering issue in IE7 due to haslayout being false on a container element. I think a lot of the quirks have been fixed, but just be aware that the engine can still render differently according to haslayout. The previous height:1px fix is no longer applicable, as IE7 quite correctly respects any absolute height that you specify.

  The fix in this case was to set min-height: 1px, which is another attribute that will now result in haslayout being set. In our case this had no adverse effect on the desired rendering, and therefore was a suitable fix. The actual problem was minor – 1px of extra padding on an element for no good reason.

  I think in a lot of cases setting a min-height value would be a good approach (obviously this can be abstracted to a seperate file and served with conditional comments). However this is a fairly unobtrusive fix, so could stay with the core set of instructions without polluting the water too much.

  Posted:

  October 4, 2006 @ 11:55

  Categories:

  Development

  Tags:

  browser, bugs, css, IE, rendering

  Comments:

  No comments so far

• Musings on Mass Uptake of IE7

  I was thinking about the impact of the delivery of IE7 via Windows Update and the fact that most people will be in possession of a good quality modern browser in the near future. I think the shortcomings of the previous version were only really so prominent due to the period of inactivity which allowed the competition to overtake.

  I developed a (probably quite sad) affection for Firefox due to the advanced state of it’s rendering engine and CSS support, but I think IE7 is actually an amazing achievement. To be in a situation where a number of different browsers running on different platforms can render in a consistent way is a big milestone. I now feel like I should also have an IE7 t-shirt and wear them on alternate days (although wearing FF regalia to TVP does seems a little rebellious).

  So it looks like the major pain in web development is slipping away. The fight for web standards is almost starting to seem retro, because of the prominent awareness of all the issues in the general populous. I really enjoyed going to the @Media event this year, but it seemed like the speakers were struggling to cover material that people weren’t already aware of. This was a massive difference from the same event the previous year.

  I’m extremely interested to see how Firefox develops in response to the IE7 full release. I think competition is extremely healthy, and will ensure that the renewed energy in the development of IE continues in the future.

  In CSS terms I think my personal favourite is proper implementation of width and height, and full support for min-width and max-width. Simple, but so welcome!

  Posted:

  September 5, 2006 @ 9:41

  Categories:

  Development

  Tags:

  css, IE, rendering

  Comments:

  No comments so far