The Future of Style

CSS3 . Info CSS3 Resource: Preview Custom Web Fonts with Font Dragr

by Chris, 04 November 2009 05:00 PM

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you [...]

CSS3 . Info Firefox Adds Support for Web Open Font Format (WOFF) via @font-face

by Chris, 02 November 2009 09:41 PM

Mozilla has joined a growing list of organizations to throw their support behind the Web Open Font Format (WOFF) and will support the embedding of WOFF fonts via @font-face from Firefox 3.6 onwards, or if you’re a developer and want to play around with this now, just download a recent nightly build or beta. Although the [...]

CSS Working Group Blog MInutes and Resolutions 2009-10-28

by fantasai, 02 November 2009 05:28 PM

• Resolved: ex definition to be changed to use the parent's element font size if set on font-size (just like em) Rationale: Avoid infinite loops in the spec. :)
• Resolved: Preserve CSS2.1's 0.5em fallback in CSS3 Values for when ex height cannot be found.
• The CSSWG has no objections in principle to Selectors API 2 introducing a new pseudo-class for its scoping element.
• display: run-in clarifications and drop-shadow proposal (see also targetting filter effects) added to TPAC agenda.
• As of 2003 the CSSValue interface is deprecated+obsolete and other specs should not rely on it. In response to Sylvain's message the CSSWG will update the DOM-L2-Style spec to include this note inline.
• Discussed TPAC agenda, schedules, and presenting at Thursday's Developer Gathering.

Full minutes

CSS Working Group Blog Minutes and Resolutions 2009-10-21

by fantasai, 24 October 2009 03:17 AM

• Reviewed last call comments on Selectors Level 3 from the Protocols and Formats Working Group. Resolved: that their first request is out-of-scope for Selectors. fantasai to respond and answer their other questions.
• Resolved: Remove "Namespaces and down-level clients" (Chapter 11) from Selectors.
• The CSSWG plans to review the state of Selectors implementation reports at TPAC: if we have enough implementation reports, we can move to PR directly.
• Resolved: Yves' comments on the Media Queries and CSS2.1 grammars result in no change.
• Briefly discussed problem with targetting filter effects. As this is a large problem, further discussion is deferred to TPAC and beyond.

Full minutes

CSS Working Group Blog CSS3 Backgrounds and Borders Last Call for Comments

by fantasai, 16 October 2009 10:00 PM

The CSS Working Group just published a Last Call for Comments Working Draft of CSS Backgrounds and Borders Level 3. Please review the draft and send your feedback. We'll be accepting comments through 17 November 2009. (Note that feature requests are likely to be deferred to CSS4.) The best place for feedback is the CSSWG's official mailing list www-style@w3.org, but we'll also look at any comments posted (or linked to) from the cross-post on CSS3.info.

There are a couple issues we're specifically looking for feedback on:

Rounding vs. Scaling Down

The round option for background-repeat and border-image-repeat resizes images to fit the nearest whole number of tiles, rather than always scaling up or always scaling down. Rounding keeps closer to the intended size and, in the case where one dimension is fixed (e.g. in ‘border-image’), keeps the image closer to the intended aspect ratio. This is almost certainly the best solution for vector images and high-resolution raster images. However, if the given image is a low-resolution raster image, it will require interpolating pixels, which can look bad. See "Rounding Extremes" for illustrations.

The workaround is to specify a higher-resolution image (e.g. by shrinking from the original with background-size or border-image-width). Possible spec solutions include introducing a separate keyword that always scales down, and changing the algorithm so that we force scaling down whenever interpolation would be required for scaling up. So the options here are

1. Leave the spec as-is (always round to nearest): the workaround is good enough for me.
2. Trigger forced downscaling when interpolation is needed: avoiding interpolation is important to me and I don't mind that the exact number of tiles is unpredictable and the resulting aspect ratio might skewed a little extra.
3. Default to rounding for round, but I want an extra keyword to force downscaling in all cases (including vector images) because [...].
4. Something else?

Please comment on what you prefer and why. (The more specific you can be "for example, this image that I would want to use [...]", the easier it will be for us to understand your point.)

box-break naming

The previous draft included two properties for controlling behavior at box breaks (line breaks / column breaks / page breaks): border-break for controlling whether the border is drawn at the break, and background-break for controlling whether the background is drawn for each box individually or for the whole element as if it were broken after painting.

Hyatt suggested merging the two, so the current draft has a single box-break property instead. The two values mean, basically, "render backgrounds and borders for this box, and then slice it up" and "break the box and then render backgrounds and borders for each box individually". The value names aren't particularly clear, however, so we were wondering if anyone has better ideas.

Conclusion

So take a look at the new draft and send us your comments! This is your last chance to give feedback on this module: if all goes well, we'll be publishing the Candidate Recommendation in time for Christmas, and given the state of experimental implementations right now, I expect things to move rapidly from there.

CSS3 . Info CSS3 Backgrounds and Borders Last Call for Comments

by fantasai, 16 October 2009 08:59 PM

The CSS Working Group just published a Last Call for Comments Working Draft of CSS Backgrounds and Borders Level 3. Please review the draft and send your feedback. We’ll be accepting comments through 17 November 2009. (Note that feature requests are likely to be deferred to CSS4.) The best place for feedback is the CSSWG’s official mailing list www-style@w3.org, but we’ll also look at any comments posted (or linked to) here on CSS3.info.

There are a couple issues we’re specifically looking for feedback on:

Rounding vs. Scaling Down

The round option for background-repeat and border-image-repeat resizes images to fit the nearest whole number of tiles, rather than always scaling up or always scaling down. Rounding keeps closer to the intended size and, in the case where one dimension is fixed (e.g. in ‘border-image’), keeps the image closer to the intended aspect ratio. This is almost certainly the best solution for vector images and high-resolution raster images. However, if the given image is a low-resolution raster image, it will require interpolating pixels, which can look bad. See Rounding Extremes for illustrations.

The workaround is to specify a higher-resolution image (e.g. by shrinking from the original with background-size or border-image-width). Possible spec solutions include introducing a separate keyword that always scales down, and changing the algorithm so that we force scaling down whenever interpolation would be required for scaling up. So the options here are

1. Leave the spec as-is (always round to nearest): the workaround is good enough for me.
2. Trigger forced downscaling when interpolation is needed: avoiding interpolation is important to me and I don’t mind that the exact number of tiles is unpredictable and the resulting aspect ratio might skewed a little extra.
3. Default to rounding for round, but I want an extra keyword to force downscaling in all cases (including vector images) because [...].
4. Something else?

Please comment on what you prefer and why. (The more specific you can be “for example, this image that I would want to use [...]“, the easier it will be for us to understand your point.)

box-break naming

The previous draft included two properties for controlling behavior at box breaks (line breaks / column breaks / page breaks): border-break for controlling whether the border is drawn at the break, and background-break for controlling whether the background is drawn for each box individually or for the whole element as if it were broken after painting.

Hyatt suggested merging the two, so the current draft has a single box-break property instead. The two values mean, basically, “render backgrounds and borders for this box, and then slice it up” and “break the box and then render backgrounds and borders for each box individually”. The value names aren’t particularly clear, however, so we were wondering if anyone has better ideas.

Conclusion

So take a look at the new draft and send us your comments! This is your last chance to give feedback on this module: if all goes well, we’ll be publishing the Candidate Recommendation in time for Christmas, and given the state of experimental implementations right now, I expect things to move rapidly from there.

CSS3 . Info Image Sprites Syntax Request

by fantasai, 16 October 2009 07:53 PM

One of the requests that came in during the WASP feedback discussions was for image “sprites”: for the ability to take a slice of an image and use it, e.g., as a background image. This would allow lots of decorative graphics to be placed in the same file. Image slices like this are actually on the CSS Working Group’s radar; the idea’s been floating around for quite awhile, and we’ve added a placeholder for them in the new CSS3 Image Values draft.

So I wanted to gather some feedback on what syntax would be most useful to you. :) The restriction is: the syntax must be usable as a value for any property that takes images. That is, you can’t suggest new properties. It has to be something that can be used as the value for any of background-image, list-style-image, content, border-image, etc. Bonus points for explaining why your proposed syntax is more convenient than any others.

A few ideas to start (feel free to add your opinion on these):

• image-slice("image.png", X, Y, W, H) Advantage: dead simple.
• url("image.png#xywh=X,Y,W,H") Advantage: can be used other places like <img src="...">, browser address bar, etc.

CSS Working Group Blog MInutes and Resolutions 2009-10-14

by fantasai, 14 October 2009 07:14 PM

• Call for agenda items for TPAC F2F meeting
• Reviewed status of CSS Multi-column Layout Last Call comments, specifically:
  • Name needs to be changed to match convention.
  • Discussed relation of this module's column-rule-color to CSS3 Color vs CSS2.1.
  • Discussed where column rules are drawn: whether they are drawn for empty columns, or empty parts of columns, or always for the entire column box.
• Discussed text-overflow: shrink proposal. A note will be added to the CSS3 Text Editor's Draft about adding a new keyword value to the text-justify property; the issue is deferred to the next active editor.

Full minutes

CSS3 . Info Introducing the Flexible Box Layout module

by Peter Gasston, 07 October 2009 10:55 PM

One aspect of CSS3 that hasn’t received a lot of attention so far is the Flexible Box Layout module. Already implemented in the Gecko and WebKit engines, in this alternative box model:

“… the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of ‘flex’ to the children that should expand.”

It’s probably easier if I show you how this works. NB: you’ll need to be using Firefox, Safari or Chrome (or a variant thereof) to see the demos; and if you’re reading this in a feed reader, you’ll need to visit the original post to see them.

Update: It’s been pointed out in the comments that Gecko & WebKit display these demos differently. I’ll look into why that’s happening, but the demos still correctly illustrate the examples I’m providing.

First of all, here’s a containing div with two children laid out in the standard model (I’ve added a background image on the container for clarity):

Using the flexible box model it’s easy to distribute those two children equally inside the container:

And here’s the code I used for that:

.container {
    display: box;
    box-align: stretch;
        box-orient: vertical;
}

.container div { box-flex: 1; }

NB: In fact I need -moz- and -webkit- prefixes for all of these, but I’ve left them out for clarity.

So what I’ve done here is set the display to the new box value, told it to stretch vertically—that is, to the top and bottom—inside the container, and set the box-flex value to 1 to indicate that it should be flexible (0 means no flexibility, but higher values are also possible; more on that shortly).

By changing the box-orient value, I can easily make them flex and stretch horizontally:

.container { box-orient: horizontal; }

Giving both of the children the same box-flex value means that the unused space will be distributed evenly between them; however, you can also provide different values to create a distribution ratio:

In this example I gave the first child a value of 2 and the second a value of 1, meaning the unused space was distributed 2:1 in favour of the first child:

.child-one { box-flex: 2; }

.child-two { box-flex: 1; }

You can also distribute elements evenly both horizontally and—finally!—vertically, by nesting horizontal and vertical containers, and using the box-align and box-pack properties:

.container { box-pack: center; }

.container .container { box-align: center; }

.container div { box-flex: 0; }

The module has many more properties for even more flexibility – this article is only a brief introduction.

The spec is currently only a working draft, but it looks as if the implementations are already pretty stable so I hope that it moves swiftly to become a recommendation.

I owe a huge debt of thanks to Alex Russell’s article, CSS3: Progress!, which explained the syntax clearly to me.

Read more articles like this on my blog, Broken Links.

CSS Working Group Blog MInutes and Resolutions 2009-10-07

by fantasai, 07 October 2009 09:09 PM

• Resolved: round keyword for background-repeat and border-image-repeat scales to the nearest whole number of tiles. This will be marked as an issue for feedback in case people prefer different behavior or would like additional controls (e.g. round-up or round-down) keywords).
• Resolved: Add percentages to border-radius. They refer to a percentage of the corresponding dimension of the box (so border-radius: 50% gives an oval).
• Resolved: Publish CSS Backgrounds and Borders Level 3 as Last Call Working Draft
• Last Call period has ended for css3-multicol; Håkon will be compiling comments (not many received).
• fantasai was asked to present on CSS at TPAC's Developer Meeting, and welcomes any suggestions for topics to cover.

Full minutes

CSS Working Group Blog MInutes and Resolutions 2009-09-30

by fantasai, 01 October 2009 01:16 AM

• Resolved: Add Tab's gradient syntax proposal to CSS Image Values Level 3. (Also: Tab will add SVG equivalents for all the examples.)
• Resolved: Drop box-shadow from CSS Backgrounds and Borders Level 3: work on box-shadow outside the module for the time being, possibly re-merge with draft later. Rationale: drop-shadows seem to need a lot more discussion, but the rest of the draft is ready to move on.
• Resolved: border-image resizes to fit small boxes the same way as border-radius (proportional in both dimensions)
• Discussed Doug Schepers' message about extensions to DOM mouse events and whether they belong in the CSSOM View Module or in DOM3 Events

Full minutes

W3C's Cascading Style Sheets home page PD4ML is an HTML+CSS to PDF converter. (Java, free trial...

29 September 2009 12:00 AM

PD4ML is an HTML+CSS to PDF converter. (Java, free trial version)

CSS Working Group Blog CSS2.1 Testing Roadmap / Minutes and Resolutions 2009-09-23

by fantasai, 23 September 2009 11:44 PM

• Resolved: New (more realistic) deadline for test submission for CSS2.1 is 15 Jan 2010. After this deadline submitted tests will be accepted for interop testing, but not for the CR->PR test reports.
• Resolved: After 15 Jan 2010, each vendor must run all submitted tests in the test suite and report back on any problems with the tests. The deadline for the first iteration of this is 15 February 2010. The deadline for the second iteration is 15 March 2010. After this audit step we will start building implementation reports.
• We will encourage and track individual human reviews of tests, and these tests will have a higher confidence rating. However, once a contributor has demonstrated a consistent level of competence, that contributor's test submissions will be included in the above process even without individual test review.
• Goal is to have a preliminary test coverage report by TPAC so that we can identify and plug holes in our test coverage.
• Arron and fantasai have organized the test suite repository. Expect to check in all submitted tests within the next week or two.
• Repository currently has ~8000 tests; final estimate ~10,000 tests. dbaron points out that many of the tests from MSFT are too divided and should be merged.
• Test suite build and indexing scripts need some work to handle directory restructuring. (An HP contractor worked on this last year. Current code, along with a junk test collection for testing, is in svn. This will build a test coverage report once set up correctly.)
• We'll need the new browser test harness to be set up for production use after Jan 15th. Unknown what is required for this; HP leveraged MWI harness to build a prototype, but the system is currently unowned. (Design docs, prototype, and current (PHP) code linked from the wiki.)
• Resolved: Keep image-fit and image-position property names, explain rationale to SVG.

Full minutes

CSS Working Group Blog Minutes and Resolutions 2009-09-09

by fantasai, 23 September 2009 04:10 AM

Short meeting this time. We just reviewed the status of the 2007 Snapshot (Beijing Profile), 2.1 issues, and TPAC plans.

Full minutes

ishida blog » css Conversion tool updated to 7.0.1

by r12a, 14 September 2009 01:07 PM

Removed the ‘beta’ from the version number and replaced with .0.1. New version converts u+… (ie. lowercase u) as well as U+… now.

See http://rishida.net/tools/conversion/

Thanks to Martin Dürst for the suggestion.

CSS3 . Info Opera 10 unleashed, brings Web Fonts and transparency to the table

by David Storey, 01 September 2009 01:41 PM

After many man-hours of work, Opera has unleashed Opera 10. This release contains the Opera Presto 2.2 rendering engine. The two main features in regards to CSS3 are Web Fonts and full support for the CSS 3 Color specification.

Web Fonts

Many followers of this blog will know all about Web Fonts by now. For those of you who are new, Web Fonts allow the author of a Web page to link to a font file on a server, rather than just the users local machine. This vastly increases the options available to designers. Opera and Safari supports linking to OpenType, TrueType and SVG fonts, Firefox support OpenType and TrueType fonts, and IE supports EOT fonts. One thing to bear in mind is that although any font can be technically used if the format is supported, the font’s EULA must explicitly allow embedding via @font-face, or be an open licensed font. Examples of high quality fonts that can be used can be found on The League of Moveable Type and WebFonts.info sites.

Web Fonts can be specified using the @font-face At-rule, along with the source of the font and the font name, at the top of the CSS file:

@font-face {
        font-family: "Alef Caps A";
        src: url(../fonts/AlefCapsA.otf) format("opentype");
}

The font can then be referenced as if was a regular font using font-family:

p:first-of-type::first-letter {
         font-family: "Alef Caps A";
}

I have prepared an example file showcasing the existing fonts that are fairly safe to use today, and a selection of high quality Web Font safe fonts. This will work in Opera, Safari and Firefox. You will need to generate EOT files for the fonts to also work in IE. This demo shows the name of the font and a sample repertoire.

For the Opera 10 launch I prepared a number of other showcases for the article The Opera 10 experience. The first showcase is a mock up Newspaper adapted from a Web Fonts showcase I wrote for this site that was never published. This uses two black letter Web Fonts and a serif web font, and should work in Opera, Safari and Firefox. The next showcase is a type specimen featuring the Junction font implemented using SVG. This requires Opera 10, as it uses SMIL animation which is not fully supported in Firefox or Safari.

I have a currently in progress Web Fonts demo using a pixel font designed for drop caps, of which you can have a sneak peak. This currently only works on Opera for Mac as I have not yet found a suitable free cursive font. Safari unfortunately does not display the Web Font as a :first-letter drop cap. Firefox has inconsistent spacing below the drop cap (which I believe is line height) which makes the text overlap the drop cap when removing the space in Safari and Opera. I hope to fix these issues before publishing the final example here.

Transparency

Opera 10 now supports the full CSS 3 Color spec, meaning that it has full support for all At-rules, selectors and properties in the CSS 2007 snapshot spec. This includes the modules that are considered stable. The only property/value pair missing is visibility: collapse; which has already been implemented in the Opera Presto 2.4 engine.

Opera supports the transparent value in the CSS 3 context, such as color, but this is not too exciting. The main action is in the HSLA and RGBA colour models. I will not cover these here as they have been covered on this site previously. For the Opera 10 launch, I updated my mock-up interface using CSS3 Colour example from CSS3.info to a new OS User Interface example (Requires Opera 10 due to use of SVG background-images). This adds more detail via SVG, such as gradients and buttons, and the windows can now be dragged around the screen. This makes liberal use of HSLA and RGBA, as well as the SVG CSS properties fill-opacity and stop-opacity. It is an example of what can now be done with the power of HTML5, CSS 3, SVG and JavaScript. We are not far away from being able to make native OS quality effects using humble web technology.

Although Opera 10 has just been released, the Opera Core team has not been sitting idly while the Desktop team were at work. The next version of the rendering engine; Opera Presto 2.3 is already finished (including the likes of border-radius, box-shadow (including the spread value and inset keyword), and friends, and Opera Presto 2.4 is under heavy development. It already is and will be an exciting time for CSS 3.

CSS3 . Info The Big CSS3 Validation Debate

by Chris, 31 August 2009 02:04 PM

Over the past few weeks I’ve received a number of emails from visitors to CSS3.info regarding CSS3 validation errors when using vendor specific extentions, for example -moz, -webkit, to implement CSS3 in their websites.

This certainly isn’t a new topic, and in fact Joost de Valke first raised the issue on this website back in January 2007, however a glance over the W3C mailing-list archive highlights that this debate is still going strong, with a number of interesting ideas raised, and I thought it would make an interesting discussion point for the CSS3.info community.

The problem is that, at present, none of the CSS3 modules have yet receached the status of becoming an official W3C Recommendation, as such any of these specifications could in theory be changed at time, particularly those that are still in the early stage of development.

Obviously browser vendors (with the exception of course of our beloved friend Microsoft) are keen to support these up and coming CSS3 specifications, however as they are still at an “experimental” stage of development it is necessary for the various css3 properties to be implemented using vendor specific extensions in order to avoid any possible conflicts with current or future css specifications.

Web designers are equally keen to implement these latest CSS3 techniques in their projects as browser support, along with interest from the wider community, continues to grow – a quick search around the blogosphere shows countless new CSS3 tutorials being added to the web on a weekly basis, and sites such as CSS3Gallery.net showcasing web designers putting CSS3 to great use in their projects. However many are facing a catch 22 situation, weighing up the pros and cons between utilising the latest that CSS3 has to offer against the fact that their creations won’t pass the W3C Validator, with some web designers even going so far as to question the importance of validation.

When Joost De Valk brought this concern before the W3C back in January 2007, he was met with a somewhat muted response, however the debate has continued to intesify and a number of interesting suggestions have been put to the W3C:

- That the CSS3 Validator could offer the option to ignore vendor specific extensions,

- That the CSS3 Validator could highlight vendor specific extentions with a warning, rather than an error,

- Or my own personal favourite, that the validator could mark such code as ‘experimental’ rather than error, or warning

Either or these methods would allow web designers to continue to validate their pages, an important process for spotting any errors in your code, as despite some designers questioning the importance of validation, personally I think it’s a necessary and important tool.

In the meantime, several web designers have suggested their own personal ways of overcoming the problem, with many commenting out CSS3 code until they have validated their pages, so that at least they can check the accuracy of their CSS2.1 code.

In conclusion I’d like to say that, in my opinion, both sides of the argument present some valid points – obviously the W3c can’t be expected to validate what isn’t technically valid CSS, however perhaps the word ‘error’ is too strong, and marking vendor specific code with a ‘warning’ or ‘experimental’ status would be a happy medium between the needs of the W3C and designers eager to implement CSS3.

At the same time, I have to question whether or not the time has yet come for designers to be implementing CSS3 in their client projects. I think CSS3 is perfectly acceptable to be used in a designer’s own projects, and quite essential to promote the growth of CSS3, but is it really acceptable to sell a client experimental code that could cease to function at any time if the W3C ammends a specification, or browser vendors change the syntax with which a property is implemented?

Once again I turn the debate over to you, CSS3.info’s readers, how to you feel about this issue, and what’s the best solution from your point of view?

CSS3 . Info New Author, Mikolaj Sitek, Introduces Himself to CSS3.info

by Jalokim, 29 August 2009 09:55 AM

My hat off to all CSS3.info readers.

My name is Mikolaj Sitek , but everybody knows me as Jalokim, (its just so much simpler isn’t it?). Some folks may know me, especially those from forumotion.com, cheers all :P. I am a young (20 yo)  freelance web designer and somewhat of a developer from Poland. Web design  became my new passion 3 years ago , earlier I was just a graphics artist and fiddling about in HTML and CSS.

The tools of my trade are as follows: For my graphics the one and only photoshop. I design sites with notepad and dreamweaver. I know CSS2 inside and out now I’m broadening my perspectives with CSS3. I picked up some javascript along the way and I am almost fluent in jquery :)

I am glad to help CSS3.info . I plan to bring some ,down to earth, CSS3 tutorials in a aesthetic and web 2,0 way. I’ll show how to use shadows without over doing them, I’ll show how to make buttons without actually using any image creating software. I hope to improve on tutorials already made, show alternatives and cooler, newer tricks.

Thank you for reading I’ll leave you with 2 vital links.
My newly opened site
Catch me on twitter

Hope to see more of you guys soon
Cordially
Jalokim of JalokimGraphics

CSS3 . Info Has IE6 Finally Reached the End of the Line?

by Chris, 27 August 2009 10:25 AM

Microsoft announced on Tuesday that network managers can now upgrade any Windows PC’s on their networks to the latest version of Internet Explorer 8 via their Windows Server Update Services platform, clearly representing a significant time saver for managers of large networks.

Does this easier to upgrade option mean that large organisations, businesses, schools, universities, colleges, etc., IE6’s last remaining stronghold,  will now finally be encouraged to make the move away from IE6?

And could this finally mean an end to Web Designers spending hours ensuring that their latest creations are backward compatible with this last remaining relic of a time long forgotten?

Here’s looking to a brighter, happier and more standards compliant IE6-less future, fingers crossed!

CSS3 . Info Firefox 3.6 adds background clipping

by Peter Gasston, 26 August 2009 09:21 AM

As well as all the new CSS features we mentioned previously, Firefox 3.6* is gaining a brand new property value: image-rect. This allows you to clip an area of a background image to display only part of the whole.

It uses Mozilla’s proprietary prefix, and takes two values: a URI for the image, and the boundaries of the clipped area (as four comma separated values, like the clip property):

foo { background-image: -moz-image-rect(
url(<uri>),
<top>,<right>,<bottom>,<left>
); }

So as an example:

.aside {
background-image: -moz-image-rect(
url('link.png'), 0, 32, 26, 0);
}

The most immediate use of this will be for making image sprites, but I’m sure the creative CSS community will be able to think of more applications for it.

I’ve created a quick demo for this; if you have a recent nightly*, you should be seeing a single picture of Link above, which changes on mouseover. Anyone not running a recent nightly will see three static Links.

* Despite image-rect being planned for inclusion in 3.6, it currently only works in nightlies of Firefox 3.7 (mozilla-central branch).

CSS3 . Info Is CSS 3 over-baked?

by Frederick Townes, 20 August 2009 06:49 PM

The CSS 3 news never really gets too quiet out there, I think that more coders and designers than ever have their heads down and hands dirty in CSS 3. How do I know? Well more tutorials and examples are being made all the time and more and more mentions are popping up on the various design and development blogs. Are your hands dirty enough? I know mine weren’t so I set out to see what’s new in for this summer as it draws to a close.

The entire web development community is on board with HTML 5 and for good reason. Modernizr is a great tool to help you stay cutting edge without alienating your visitors who aren’t running the latest and greatest browser releases. Currently friendly with Safari 4, Firefox 3.5, Operate 10b1 and IE 8, this JS library is definitely handy.

The simplicity and elegance with which many common interface elements can be handled with CSS 3 is part of the attraction to the new standard. Border-radius, border-image etc in particular as well as a handful of other styling options are at the heart of a very practical interface technique that doesn’t need any imagery. Sprites were a quite practical way to improve page load response time, feel of an interface and simplify maintenance, but if you can remove the need for images altogether for parts of your interface (a dream come true), now you’re on your way to interfaces that are easier to support and give you more leverage. Sean Martell (Much ado about pixels) has a great practical example worth checking out.

The ever prolific John Resig weighed (as did Eric Meyer) in the past on the CSS 3 specification and the template layout issues that many have with the proposal. Anyway, the topic was rekindled by Alexis Deveria discussing the jQuery plugin that eventually arose from the topic.

Do you feel this kind of approach is practical? What about libraries like Modernizr? I personally spoke to John about things like this early last year and am excited to see them appearing. Let us know in the comments if you’d rather see CSS focused on elegant (and native) implementation of practical features, or if you appreciate the value JavaScript can contribute.

ishida blog » css Further developments to Language Tag Lookup tool

by r12a, 19 August 2009 02:45 PM

>> Use it

I have added a bunch of additional new features to my lookup tool to help with choosing language tags. There is additional information available when you look up subtags (such as what to use if the subtag is deprecated, and what subtags macrolanguages enclose, etc.), and more tests on well-formedness with clearer explanations of the problem. Example.

This should make it a lot more useful to people who haven’t read BCP 47 and want to create language tags. Hopefully, in a short while, I’ll also write and link to an article that describes how to use subtags from the ground up in a procedural way, that will complement the tool.

For further assistance, you can now link from a language subtag result to the SIL Ethnologue, to make it easier to check whether that subtag really does refer to the language you were thinking of.

In addition, script subtag results link to Unicode blocks in UniView.

W3C's Cascading Style Sheets home page Paris Web 2009 is a francophone conference focusing on web...

15 August 2009 12:00 AM

Paris Web 2009 is a francophone conference focusing on web accessibility, quality and design. It is held in Paris on October 8, 9 and 10. Speakers include Daniel Glazman, Molly Holzschlag, Tristan Nitot, Karl Dubost and Nicole Sullivan. Early registration (until August 31) starts at EUR 130. Paris-Web 2009 est une conférence francophone qui se tient les 8, 9 et 10 octobre à Paris, et dont les thèmes principaux sont l'accessibilité, la qualité et le design web. Parmi les orateurs présents se trouvent Daniel Glazman, Molly Holzschlag, Tristan Nitot, Karl Dubost ou encore Nicole Sullivan. Le tarif réduit (jusqu'à fin août) est de 130 €.

ishida blog » css Language tag lookup tool: bigger and better

by r12a, 13 August 2009 04:22 PM

>> Use it

The IANA Subtag Registry has been recently updated to contain 220 extlang subtags and the ISO 639-3 language subtags, taking the total number of subtags to almost 8,000.

I have produced a new version of my lookup tool to help with language tagging. In addition to helping you find subtags and lookup the meaning of subtags, it now helps check the well-formedness of a language tag.

The tool provides access to all currently defined subtags, including the new extlang subtags.

Parsing language tags. In addition to trying to make the user interface more friendly, I also added the ability to parse hyphenated tags and discover their structure and check for errors. I’m not claiming with this release that the new parser field tests all the corner cases, but it should provide reports for most of the typical errors.

It reports errors for the following:

- subtags that are not in the registry (by type)
- incorrectly ordered subtags
- duplicate variant tags and multiple tags of other types
- overlong private use subtags

Try this example.

It doesn’t yet handle extensions, but then there aren’t any valid ones to handle yet anyway.

I hope that’s useful.

CSS3 . Info Suzy waves to readers of css3.info

by Suzy, 12 August 2009 07:39 PM

Hiya to all CSS3.info readers

I’d like to introduce myself in this time of CSS3 excitement and changes here at CSS3.info. Some of you may already know me under the nom de plume of SuzyUK from the CSS Forum at WebmasterWorld. My ‘name ‘has always confused people as I registered on t’internet in the days ‘ASL’ pests and my previous nicknames never even gave away my gender.

To make it easy, my name is Claire ‘Suzy’ Campbell, Suzy really is my middle name. In my real life I answer to both Claire or Suzy, and on the Web I answer to both too though mostly it’s Suzy. To try and make it easy I’m also a recent twitter convert so I combined them both – you can find me on @ClaireSuzy . I’m Scottish, from the Doric Speaking region so sometimes native ‘wee’ words might crop up in my speech.

I have loved CSS since the minute I first came across it circa 1997. My personal site tanfa has always ever been a WIP,  (like the cobbler’s children that never have shoes!), though it has some early doors demos on it, and boasts one of the first (very plain) Pure CSS drop ‘n’ pop menu tutorials. It also has a very early, but more pertinent today, CSS Sprite Demo Europe Map Sprite – The old site has been archived and is the process of changing to a somewhat more personal, light-hearted view of CSS, Design, jQuery, SVG, Photoshop you name it I might chat about it.

Small claim to fame – 15mins in internet years must be about 30seconds? – is that I ‘helped’ (a lot of cleverer people than I) figure out hasLayout (look there’s a wee link at the bottom) and innately understand IE6 if that’s even possible!

I am so looking forward to chatting about, and using, CSS3 without the “but it doesn’t work in…” comments just letting the imagination run and going with the flow sounds like great fun. The ways in which we can use it already are really exciting. I’m loving seeing what the perseverance of early adopters has done for CSS in general and think it’s about take off in an unprecedented manner. To wit I am excited to part of the CSS3.info author team.  I’m particularly excited about the layout modules as it’s high time CSS took responsibility for presenting the whole page.

Favourite Browser: Firefox, was a silent NN user before that, am gradually turning to Safari for Development. I use Chrome only for opening my mail, Opera is there or there abouts but I’m a little disappointed in how far they fell behind as they were so far ahead at one point, as far as CSS in concerned anyway, though they have my undying love and support. IE only gets opened when needed. All on Windows as that is my ‘bread an’ butter’ OS

I hope you like what I might bring to this great site and if you would like me to cover some of the pretty, enhancement stuff, please do let me know, it’s so hard to keep up with all the CSS3 goodness going on at the minute and while I work on “normal” CSS usage daily I like to keep up with the new stuff too. CSS has always been my hobby as well as my extra job too :)

thanks, and I look forward to meeting you all

ishida blog » css UniView 5.2(beta)a: Graphics as default

by r12a, 31 July 2009 06:33 AM

>> See what it can do

>> Use it

Following hot on the heels of the last release come some further significant changes to UniView aimed at making it easier to use as Unicode grows.

The big change is that UniView now starts up in graphics mode by default. This means that pages load more slowly, but (especially with the continuing growth of Unicode) also means that you are more likely to be able to see the characters you are looking for. It’s easy to switch between modes at any point, using the “Use graphics” checkbox. (And if you preferred font glyphs as a default, you just need to change the URI in your bookmarked link slightly, and you can continue to work that way.)

To facilitate this change, I created my own graphics for a number of blocks which are not yet covered by decodeunicode, or which are no longer fully covered by decodeunicode. The blocks for which I provided graphics are Latin Extended-C, Latin Extended-D, Latin Extended Additional, Cyrillic Supplement, Cyrillic Extended-B, Modifier Tone Letters, Tibetan, Malayalam, Saurashtra, Ol Chiki, Myanmar, Kayah Li, Cham, Rejang, Vai, Supplemental Punctuation, and Miscellaneous Symbols and Arrows.

There are still many characters for which there are no graphics (especially the new characters in Unicode 5.2), but coverage is much better than it was. As I find more fonts, I will be able to create graphics for the remaining characters.

I also put a grey box around the characters in tables. This is particularly useful if there are no graphics or font glyphs for a block or range of characters, as it makes it easier to locate the character you are looking for.

I also fixed a bug that was preventing Chrome and Safari and IE from displaying the first two Latin blocks. I think the bug was actually in the Unicode data file.

ishida blog » css UniView 5.2beta available

by r12a, 27 July 2009 12:46 PM

>> See what it can do

>> Use it

With the family now in Japan, I had some extra time to spare this weekend, so I upgraded UniView to handle all the proposed characters for Unicode 5.2.

While the properties for new and modified characters are still in beta they are not officially stable, however the character allocations should be stable at this point. UniView therefore alerts you if you are looking at a new character.

If the Unicode database information has changed for a given character you are also warned, and provided with a link that points to the previous information for that character. These warnings will be removed from UniView when Unicode 5.2 is released.

Of course, you are unlikely to be able to actually see the new characters themselves, unless you are lucky enough to have a very new font to hand. The graphic alternatives are not available yet for these characters. I’m wondering whether it’s possible for me to do something about that, but that will take a little longer. In the meantime, you might find it more useful to view blocks in list view. (Click on ‘Show range as list’).

This release also fixes a few small bugs in the HTML and JavaScript code.

ishida blog » css Berlin & Potsdam photos

by r12a, 11 July 2009 05:21 AM

I was in Berlin for Localization World and then Potsdam to talk about Japanese Layout last month.

I didn’t get much time for photos in Berlin. These photos were mostly taken during the dinner cruise. And in Potsdam it poured with rain most of the day, so the photo look a little dark.

I also uploaded a bunch of photos from a trip to Berlin with the family in 2005.

There are 4 new sets of photos:

• Berlin selection Some of the better photos from Berlin from both trips.
• Potsdam selection Ditto for Potsdam.
• Potsdam & Berlin, 2009 Trip record.
• Berlin, 2005 Trip record.

ishida blog » css Converter tool updated and moved

by r12a, 01 July 2009 09:06 AM

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.

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

23 June 2009 12:00 AM

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.