CSS4: First Spec Released – Selectors

Friday, September 30th, 2011 | Business | No Comments

W3C released the first spec of CSS4 yesterday, and it’s focused on selectors.  Selectors Level 4 introduces many new and useful elements.

Some newly introduced selectors are (where E is an element):

  • E:not (s1, s2)
  • E:matches(s1,s2)
  • E[foo=”bar” i]
  • E:local-link
  • E:local-link(0)
  • E:current
  • E:current(s)
  • E:past
  • E:future
  • E:indeterminate
  • E:default
  • E:in-range, E:out-range
  • E:required, E:optional
  • E:read-only
  • E:read-write
  • E:nth-match(n of selector) – stated twice in the spec for some reason
  • E:column(selector)
  • E:nth-column(n)
  • E:nth-last-column(n)
  • E /foo/ F – this sounds interesting, an F element referenced by E’s foo attribute
  • $E > F – this will be important, it selects the “E” part of what used to only select F (you can still use E>F for the F element)

The current / past / future selectors are interesting.  I’m not entirely sure what the indicators will be.  The document is somewhat vague in whether you will define a “time/date” attribute, or if it’s just before / after in the document hierarchy.  It sounds like there will be graceful degradation.

Of course, CSS4 won’t officially see the light of day likely for a few years.  CSS3 isn’t technically finished yet either.

However, given a previous direction of no more “versions” of HTML.  We can safely assume W3C will begin releasing these specs for browsers to incorporate at their earliest convenience.

It is a double edged sword.  If a spec is implemented differently by different browsers, then we fork web developer code in the ambiguities of the early spec.  Will browsers implement the past/current/future on their own?

Tags: , ,

HTML5: Video, 3D, Javascript and a Big Buck Bunny

Wednesday, April 21st, 2010 | Business | No Comments

An article written by Sean Christmann over at Craftymind reviews some cool effects you can create with HTML5, Video and 3D featuring the Blender created Big Buck Bunny.

› Continue reading

Tags: , , , , , , , , ,

CSS3 Layout Structure

Monday, November 10th, 2008 | Business | No Comments

Looking over a few articles, I ended up on CSS Advanced Layout Module, a Working Draft for CSS3 on w3.org.

We’ve covered some changes to HTML/CSS parsing in IE8 that will make some standard web layouts much simpler to represent in CSS, CSS in IE8 will support “tables”, fixes problems in CSS.

The new document addresses, in a different method, the problem of laying out tables as most websites are built.

Again, standard CSS makes it difficult to allow text to push the template in the proper directions.  Pushing itself is fine, however the way the rest of the template adjusts to the content — normally doesn’t react as a end user would expect.

The new document details a way to dictate display in a template.

The first interesting point is the document proposes a way to define the rows in a display.  The example provided defines a container, DL, which has a display of “ab” “cd” (in that order).  This means that cell A is top left, B is top right, C is bottom left, and D is bottom right.  This makes life so much easier.  To follow, the elements inside DL are defined as, for example, “#sym1 { position: a}” and “#lab1 { position: b}”.  Suddenly tables are much easier to work with.

Secondly, this opens up functionality the draft has addressed.  The ability to change the display to move the document from 3 columns, to 1 column / 3 rows.  By defining “@media all and {max-width: 500px}” the draft identifies the ability to change the “ab” “cd” to “a” “b” “c” “d”.  Adjusting for a mobile browser, or other alternative browsers (maybe iframes friendly?).

Additional concepts addressed in the draft:

  1. Overlapping divs with the earlier display methodology
  2. Table like declarations of width, wrapping, etc
Lets hope this gets passed and incorporated (or just incorporated into a browser, as browsers seem to be slightly ahead of w3.org in terms of accepting drafts).

Tags: , , , , , , , ,

Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter



prestashop theme

virtuemart template