The Future of Style

The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS) [not development with Cascading Style Sheets]. While it is hosted by the W3C CSS Working Group, the content of the individual entries represent only the opinion of their respective authors and does not reflect the position of the CSS Working Group or the W3C.

CSS Working Group Blog Minutes and Resoutions 2009-07-01

Full minutes

ishida blog » css Converter tool updated and moved

>> Try it

Picture of the page in action.

A new version of this very popular tool is now available, in a new location. Although it is currently labeled ‘beta’, I recommend that you use that instead, and change any links and bookmarks to the new location. There are a number of new features.

There is also a vastly improved code base. If you are one of the many people who have contacted me to ask how I coded the conversions, please take a look at the new javascript code. It is much cleaner and more compact.

New features include:

* New mixed input field and position of some fields changed.
* New field for conversion of 0x… notation hex escapes.
* Enabled invisible and ambiguous characters to be made visible in the XML output.
* Added support for all HTML entities in HTML/XML input.
* All code rewritten to use characters as the internal representation, rather than code points. Also, code is much smaller and cleaner, partly through use of regular expression matching.
* Various filters available for conversion, such as allowing ASCII or Latin1 characters to remain unconverted in NCR output.
* New icon to quickly select all contents of a field.

There is also a new demonstration feature.

If there are no issues raised/remaining in a couple of months, I’ll remove the beta tag.

CSS Working Group Blog Minutes and Resolutions 2009-06-24

Full minutes

CSS Working Group Blog Minutes and Resolutions June 2009 F2F

MultiCol

Paged Media

GCPM

Grid, Templates, and other coarse layout systems

Flexbox

David Baron explains the flexbox model, what parts have been implemented by Mozilla and Webkit, and what parts are underdefined.

Resolved: Change Ian's editor status and publish flexbox as FPWD.

CSS Backgrounds and Borders Level 3

text-overflow

CSS2.1 Issues

Fonts

SVG Coordination

image-fit and image-position

Test Suites

Reftests

Mozilla is proposing a new format for CSS tests. It can't be used to test everything, but can make testing many things much simpler and easy to automate. The basic principle is that each test consists of two files, which must be rendered identically. A complex test can then be compared against a simpler page that has the same result. This is better than comparing against an image because it equalizes font availability, anti-aliasing, and other platform- and UA-specific aspects of CSS rendering.

Resolved: we accept tests in reftest format as well, as long as they have the required metadata Rationale: Many tests easier to write, and especially, to run this way.

Molly's Role and the CSSWG Website

IPTV

Discussed IPTV liaison statement and our response to it.

Upcoming Meetings

Disposition of Comments Format

Discussion of formatting for Disposition of Comments document. Various authors have adopted different style, Daniel wants to consolidate.

Abandoned Working Drafts

Full Minutes

  1. Wed Part I: Testing
  2. Wed Part II: Scheduling, Website, text-overflow, DoC format
  3. Wed Part III: Multi-col, Abandoned Drafts, Splitting border-image
  4. Thurs Part I: GCPM, Flexbox
  5. Thurs Part II: vertical-align ambiguities, Paged Media
  6. Thurs Part III: CSS2.1 Grammar Issues, IPTV liaison
  7. Fri Part I: SVG Properties, Fonts
  8. Fri Part II: Grid, Templates, and other coarse layout systems
  9. Fri Part III: CSS3 Backgrounds and Borders

CSS Working Group Blog MInutes and Resolutions 2009-05-13

Full minutes

CSS Working Group Blog Minutes and Resolutions 2009-05-20

Full minutes

CSS Working Group Blog MInutes and Resolutions 2009-05-27

Full minutes

CSS Working Group Blog MInutes and Resolutions 2009-05-06

Full minutes

CSS Working Group Blog Minutes and Resolutions 2009-04-29

Full minutes

CSS Working Group Blog MInutes and Resolutions 2009-04-15

Full minutes

CSS Working Group Blog MInutes and Resolutions 2009-04-08

Full minutes

CSS Working Group Blog MInutes and Resolutions 2009-04-01

Full minutes

CSS Working Group Blog Minutes and resolutions 2009-03-18

Full minutes

W3C's Cascading Style Sheets home page The “CSS Summit” is a one-day, online conference on July...

The “CSS Summit” is a one-day, online conference on July 18, hosted by Christopher Schmitt. Speakers include Molly Holzschlag, and Jason Cranford Teague. Early registration (until July 3) is USD 139.

CSS3 . Info CSS3 Rekindled

Earlier this year we asked if you still want more out of CSS 3 and we found that you did. Of late, we are seeing the dialogue rekindled time and again with great posts being written on other major blogs. Smashing Magazine contributor Inayaili de Leon provides code samples and insight on: using browser-specific properties, selectors, RBGA and opacity, multi-column layouts, multiple backgrounds, word wrap, text shadow. @font-face attribute, border radius, border image, box shadow and more. Definitely great work by de Leon, that also earned a mention from ajaxian. So check out the post and enjoy! Well done Inayaili!

CSS3 . Info Try out the CSS 3 Template Layout module

If you want to get a taste of using the CSS 3 Template Layout module, Alex Deveria has written a jQuery plugin which implements the syntax.

I haven’t had the opportunity to try it out yet, so let me know how you get on.

W3C's Cascading Style Sheets home page Alexis Deveria created a prototype in JavaScript for people who...

Alexis Deveria created a prototype in JavaScript for people who want to experiment with the April 2009 draft of CSS Template Layout. Earlier prototypes were by César Acebal (2006) also in JavaScript and Andrew Fedoniouk. (March 2009) in the HTMLayout embedded renderer. (JavaScript, Open Source)

W3C's Cascading Style Sheets home page The Lobo browser (current version is 0.98) supports CSS2 and...

The Lobo browser (current version is 0.98) supports CSS2 and also runs Web applications in JavaFX or Java. (Java, Open Source)

CSS3 . Info CSSWG RFC: border-image Issues and Other Topics

So, the CSS Working Group is trying to wrap up the CSS3 Backgrounds and Borders Module and prepare it for Last Call. However, there are still some open issues we’d would like to get comments on.

Most of the open issues revolve around border-image. Brad Kemper knocked down several with his proposal and the CSS Working Group has adopted it in principle. (You can find it drafted into the latest unofficial Editor’s Draft on the W3C site.) We’re still ironing out the details on that, but there are a few others still open on border-image:

First Issue: Several people have commented that they would like a way to clip out the center part of the image. There are two options for this: A) Keep the middle part by default (current behavior). Add an empty keyword that clips out the middle part. B) Make the middle part clip out by default. Add a fill keyword that keeps it. (It’s needed for stretch-tiling things like aqua buttons.) Of course we might also just keep the current solution, C) have authors make that part of the image transparent. Comments? What would you use?

Second Issue: The syntax is particularly arcane. One commenter suggested breaking up border-image into multiple properties, leaving border-image itself as a shorthand. For example,

border-image: url(...) 20% 40% / 10% 4em 20% / 0 1em;

would be equivalent to

border-image-source: url(...);
border-image-slice: 20% 40%;
border-image-widths: 10% 4em 20%;
border-image-outset: 0 1em;

This would also allow the values to cascade independently, making it easy to e.g. swap just the image. There’s an overhead cost to more properties, however, so if we do this there needs to be a significant and useful advantage. Thoughts on this idea, or any other ideas for making border-image easier to understand?

Third Issue: There’s still an open question of how border-image should interact with box-shadow. The two proposals on the table are: 1.) Ignore box-shadow when border-image is in effect. (The author can draw the shadow directly in the border-image.) 2.) Use the border-image as a mask to draw a shadow, but only draw the shadow where it appears outside the padding edge (inner border edge). Comments? Preferences?

Fourth Issue: The next topic is fallback colors: the current draft has a feature that lets you specify a background color to use only if the bottommost background image fails to load. The WG wants to know, is this feature something authors really want? Several WG members have posted comments saying that it’s too hard to understand, that it’s not useful, and that the proposed syntax doesn’t make sense. What do you think?

Fifth Issue: The last issue is, the current draft specifies a background-clip: no-clip feature that lets a background image spill out of the border box. Implementors are concerned that it’s tricky to implement, and aren’t convinced that it would be useful. If this is something you want, show off a realistic example or two that demonstrates why it is needed.

Off-topic Issue: While I’m here, the WG wanted me to ask what people thought of renaming the block-progression property to block-flow or block-direction and whether either was more understandable (or if anyone had better ideas). The property changes the direction of block layout, and the values are tb (horizontal lines stacked top-to-bottom, like English text), rl (vertical lines stacked right-to-left, like traditional Chinese text), and lr (vertical lines stacked left-to-right). This is for vertical text layout, btw; it’s different from graphical rotation. See pages 2-5 of UTN 22 (PDF/HTML+SVG) for a definition.

P.S. Could someone please fix the css3.info style sheet so it doesn’t effectively eat list markup? Thanks.

CSS3 . Info Further progression in layout modules

The CSS Working Group had a face-to-face meeting in Tokyo last month and made a series of resolutions (which can be found on their blog). Most are fine technical points, but one of the more interesting is that the multi-column layout module is about to be reissued as a ‘last call’ document; after this, the module will be released as a candidate recommendation, meaning the authors are satisfied that the standard does what is needed of it, and will call for implementation.

As you may know, Webkit browsers (Safari, Chrome, etc) already support multi-column declarations (with a -webkit- prefix) and Gecko browsers (Firefox, Camino, etc) partially support it (with a -moz- prefix) – and fuller support will be forthcoming in Firefox 3.5. With those implementations in place, I’m hopeful that it will pass quickly through the recommendation process and become a standard.

Last week saw another layout proposal, the template layout module, reissued as an updated working draft. Previously known as the advanced layout module (and featured in our article How We’ll Lay Out Websites in 2016).

As a quick reminder, template layouts allow you to assign content to ’slots’, which can then be laid out by declaring a grid using alphabetical characters. The following code would set up a two row grid, with the top row spanning the three individual columns of the bottom row:

body {
display:
'aaa'
'bcd';
}

You could then match elements to each slot by using pre-existing selectors and the position attribute:

div#div1 { position: a; }
div#div2 { position: b; }

And also use the new slot pseudo-class to apply styles:

body::slot(a) { border: 1px solid; }

This is probably the most radical proposal since the CSS standard was first created, allowing for very flexible template layouts, and I’m quite excited about it. However, it currently has no implementation, so is doubtless a long way off. Perhaps my satirical date of 2016 is not too wide of the mark after all.

CSS3 . Info Four new W3C modules for CSS Level 3

The W3C have announced the creation of four new modules for CSS Level 3. The modules add entirely new functionality and do not extend any previous CSS Level 1 or Level 2 functionality. They are based on proposals from Apple’s WebKit team, and the current drafts are available from the following URLs:

The new modules are all in Working Draft status at present, and are going to be developed in unison with related SVG technologies.

W3C's Cascading Style Sheets home page Antenna House released AH Formatter version 5.0. The AH Formatter lays...

Antenna House released AH Formatter version 5.0. The AH Formatter lays out XML and (X)HTML documents for print or PDF. It handles both CSS and XSL and includes CSS 2.1, Paged Media, GCPM, Multi-column, Vertical Text, etc. It also supports SVG and MathML. (Windows, Linux, Mac OS X, Solaris, HP-UX; restricted evaluation version)

W3C's Cascading Style Sheets home page Microsoft released version 8 of Internet Explorer, with full CSS level...

Microsoft released version 8 of Internet Explorer, with full CSS level 2 support, plus some internationalization features from level 3. (Windows, free)

CSS3 . Info Styling scrollbars the Webkit way

An interesting implementation has recently made its way into the latest Webkit nightlies – a detailed method of styling scrollbars using a combination of new pseudo-elements and pseudo-classes.

Example

Although the new syntax can seem complicated at first, Webkits implementation gives authors the ability to completely alter the look and feel of scrollbars of overflow sections, listboxes, dropdown menus & textareas, and when used in conjunction with border-image and multiple backgrounds, the results can look beautiful.

Whitepaper gives more details on the implementation.

ishida blog » css New tool: Territory finder

>> Use it

Picture of the page in action.

This is a new tool that helps you to locate a country or territory on a map of the world. Ever wondered where Khazakhstan is? This will show you.

The map is in SVG and expands to fill the window. Territories are coloured red. Very small territories are marked by a red dot.

The map comes from Wikipedia. The list of territories comes from the regions listed in the IANA Language Subtag Registry. I can’t guarrantee that all the territories in the pulldown list are viewable, but nearly all are.

It’s quite a big SVG file, so it takes a little while to draw. I’ll try to speed that up in the future. It seems to draw much faster on Chrome or Opera than on Firefox or IE.

For the future I have some other ideas, such as displaying the country name natively, and linking to Wikipedia articles, CLDR data, etc. But that’s for later.

Update: Almost every time I located a country, I found myself wondering what the countries alongside are. So now as you move your mouse over a country, the name of that country pops up.

Enjoy.

W3C's Cascading Style Sheets home page Zembly by Sun Microsystems is a Web site that hosts...

Zembly by Sun Microsystems is a Web site that hosts Web applications (“widgets”), a bit like other sites host photos or wikis. Its browser-based interface helps create and edit widgets and includes a CSS editor with syntax highlighting. Requires Javascript. (Beta version, free basic account)

CSS Working Group Blog Selectors Level 3 Updated

The CSS Working Group has just published a new Last Call Working Draft of the Selectors module. This working draft addresses many comments that have been received since the last publication. The Last Call period extends until April 7th; please send any comments to www-style@w3.org. Note that we will not be accepting new feature requests for Level 3. Assuming no major problems are found, we will be republishing a Selectors Candidate Recommendation in April.

CSS Working Group Blog Minutes and Resolutions Tokyo F2F Fri: @namespace, June F2F prep, Testing, Publications

Full minutes

CSS Working Group Blog Minutes and Resolutions Tokyo F2F Fri: CSS2.1, box-shadow and border-image

CSS Working Group Blog Minutes and Resolutions Tokyo F2F Fri: Fonts

Full minutes

The Future of Style features:

If you have a post you want to add to this feed, post a link (or the whole thing) on the CSS3 Soapbox. If you own a blog with frequent posts about the future of CSS, and want to be added to this aggregator, please get in touch with fantasai.

Recent entries:

CSS Valid CSS!Valid HTML 4.0! RSS feed Atom feed

fantasai