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.

Latest articles

Announcing Code 2016, now in Sydney and Melbourne

Source: Web Directions Blog John • 24 May 2016 05:21 AM

In 2012, after many years of an annual single conference in Australia, Web Directions, we launched Code, a specifically developer focused, single track conference, in Melbourne, one of our very favourite cities anywhere.

Right from the beginning it was a success, and over the years we’ve had some incredible speakers, focussing on core web platform technologies, in particular JavaScript and browser APIs, as well best practice in performance, security, and all things front-end engineering.

We’ve just launched the 2016 program for Code, but before we get into the specifics, we’re excited to announce that it will, like our recent Respond conference, take place in both Sydney and Melbourne this year.

And as for content, well, I’m not sure I’ve ever been quite as exctied about a program we’ve put together (and we’ve put together a few, that I’m usually very excited about!) Here’s some of what’s in store.

Performance, since well, your web site or app can never be (or at least feel) too fast, and small efforts can often yield big results in this area. So we’ve got

Page Layout, as numerous long-awaited CSS layout features, including flexbox and Grid layouts are now ready for primetime. We’ve got

These technologies are without question the future of Web site and App layout, and any developer worth their salt will really need to be well versed in these technologies. We’ve also got a whole day workshop by Rachel on all this and more–everything there is to know about modern web layout, in Melbourne August 3rd, the day after the conference.

But we’ve barely begun the scratch the surface of the program. We’re excited to have Alicia Sedlock covering all things front end testing (like washing our hands, it’s what everyone says they do, and wants to do, but doesn’t always do, now there’ll be no excuses!), Greg Rewis on the incredibly important, but almost entirely overlooked opportunity of Internationalisation, and the legendary Dmitry Baranovskyi on the state of modern JavaScript.

And there’s so much more still! From properly using unicode, to CSS engineering (yes, it’s a thing), functional JavaScript, to JavaScript garbage collection, from Web App Manifests, to semantic versioning, Code will make you and the things you build just plain better.

If you build things for the Web, we promise you’ll do it better if you come to Code. We’re really excited for this year’s conference, and hope you are too.

The post Announcing Code 2016, now in Sydney and Melbourne appeared first on Web Directions.

HTTPS and the Semantic Web/Linked Data

Source: W3C Blog Phil Archer • 20 May 2016 05:51 PM

In short, keep writing “http:” and trust that the infrastructure will quietly switch over to TLS (https) whenever both client and server can handle it. Meanwhile, let’s try to get SemWeb software to be doing TLS+UIR+HSTS and be as secure as modern browsers.

Sandro Hawke

As we hope you’ve noticed, W3C is increasing the security of its own Web site and is strongly encouraging everyone to do the same. I’ve included some details from our systems team below for an explanation but the key technologies to look into if you’re interested are Http Strict Transport Security (HSTS) and Upgrade-Insecure-Requests (UIR).

Bottom line: we want everyone to use HTTPS and there are smarts in place on our servers and in many browsers to take care of the upgrade automatically.

So what of Semantic Web URIs, particularly namespaces like http://www.w3.org/1999/02/22-rdf-syntax-ns#?

Visit that URI in a modern, secure browser and you’ll be redirected to https://www.w3.org/1999/02/22-rdf-syntax-ns#. Older browsers and, in this context more importantly, other user agents that do not recognize HSTS and/or UIR will not be redirected. So you can go on using http://www.w3.org namespaces without disruption.

This raises a number of questions.

Firstly, is the community agreed that if two URIs differ only in the scheme (http://, https:// and perhaps whatever comes in future) then they identify the same resource? We believe that this can only be asserted by the domain owner. In the specific case of http://www.w3.org/* we do make that assertion. Note that this does not necessarily apply to any current or future subdomains of w3.org.

Secondly, some members of the Semantic Web community have already moved to HTTPS (it was a key motivator for w3id.org). How steep is the path from where we are today to moving to a more secure Semantic Web, i.e. one that habitually uses HTTPS rather than HTTP? Have you/are you considering upgrading your own software?

Until and if the Semantic Web operates on more secure connections, we will need to be careful to pass around http URIs – which is likely to mean remembering to knock off the s when pasting a URI from your browser.

That’s a royal pain but we’ve looked at various workarounds and they’re all horrible. For example, we could deliberately redirect requests to things like our vocabulary namespaces away from the secure w3.org site to a deliberately less secure sub-domain – gah! No thanks.

Thirdly, a key feature of the HSTS/UIR landscape is that there is no need to go back and edit old resources – communication is carried out using HTTPS without further intervention. Can this be true for Semantic Web/Linked Data too or should we be considering more drastic action. For example, editing definitions in turtle files such as the one at http://www.w3.org/ns/dcat# to make it explicit that http://www.w3.org/ns/dcat#Dataset is owl:equivalentClass to https://www.w3.org/ns/dcat#Dataset (or even worse, having to go through and actually duplicate all the definitions with the different subject).

I really hope point 3 is unnecessary – but I’d like to be sure it is.

Background

Jose Kahan from W3C’s Systems Team adds

HSTS does the client side upgrade from HTTP to HTTPS for a given domain. However, that header is only sent when doing an HTTPS connection. UIR defines a header that, if sent by browser, will tell the server it prefers using HTTPS and the server will redirect to HTTPS, then HSTS (through the header in the response) will kick in. HSTS doesn’t handle the case of mixed-content. That is the other part that UIR does to complement HSTS: tell the browser to update URLs of all content associated with a resource to HTTPS before requesting it.

For browser UAs, if HSTS is enabled for a domain and you browse a document by typing its URL on the navigation bar or follow a link to a new document, the request will be sent as HTTPS, regardless of the URL saying HTTP. If the document includes a CSS file, javascript, or an image, for example and that URL is HTTP, the request for those resources will only be sent as HTTPS if the UA supports UIR.

CSS Dev Conf is a conference about CSS in San Antonio TX (US…

Source: W3C's Cascading Style Sheets home page20 May 2016 05:30 AM

17 Oct 2016 CSS Dev Conf is a conference about CSS in San Antonio TX (USA), on 17–19 October. A feature of this conference is that part of the conference program is determined by vote.

CSS Grid Layout – Updated Working Draft

Source: CSS WG Blog fantasai • 20 May 2016 02:28 AM

The CSS Working Group has published an updated Working Draft of CSS Grid Layout Module Level 1. This module defines a new type of layout manager, the grid, which makes it extremely easy to specify complex, responsive 2-dimensional layouts for a page or components.

This new draft incorporates a lot of feedback since the previous draft, including a simplified subgrid proposal, a much-improved grid shorthand syntax that accommodates auto-flow grids, and many bugfixes. Changes since the last Working Draft are listed in the Changes section, and a Disposition of Comments is available.

Please send feedback by either filing an issue in GitHub or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-grid]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

We do expect to transition this module to Candidate Recommendation shortly, so any feedback had best be sent ASAP!

CSS Box Alignment Level 3 – Updated Working Draft

Source: CSS WG Blog fantasai • 20 May 2016 02:21 AM

The CSS Working Group has published an updated Working Draft of CSS Box Alignment Level 3. This module defines new features relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.

This draft includes a slew of relatively minor tweaks and bugfixes, particularly to the baseline-alignment section, plus a change in the default “safety” of overflow handling. Changes since the last Working Draft are listed in the Changes section.

Please send feedback by either filing an issue in GitHub or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-align]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

We would also welcome the donation of any illustrations or examples, as this document desperately needs more.

The CSS WG updated the Candidate Recommendation of CSS Casca…

Source: W3C's Cascading Style Sheets home page19 May 2016 12:00 AM

19 May 2016 The CSS WG updated the Candidate Recommendation of CSS Cascading and Inheritance Level 3 and the Working Drafts CSS Grid Layout Module Level 1 and CSS Box Alignment Module Level 3

The CSS WG updated the Working Draft of CSS Positioned Layou…

Source: W3C's Cascading Style Sheets home page17 May 2016 12:00 AM

17 May 2016 The CSS WG updated the Working Draft of CSS Positioned Layout Module Level 3.

Protected: Eurovision alternative results

Source: ishida blog » cssr12a • 15 May 2016 09:02 AM

This content is password protected. To view it please enter your password below:

The CSS WG updated the Working Draft of CSS Intrinsic & …

Source: W3C's Cascading Style Sheets home page12 May 2016 12:00 AM

12 May 2016 The CSS WG updated the Working Draft of CSS Intrinsic & Extrinsic Sizing Module Level 3. This is probably the last draft before CR. Some definitions have been moved to a future level 4. (In the mean time, find them in the previous draft.)

Video of the Week: Ryan Seddon–Houdini

Source: Web Directions Blog John • 06 May 2016 04:18 AM

Don’t you sometimes wish you could create your own CSS properties? Not just some syntactic sugar to make life easier like Sass and other pre-processors, but honest-to-goodness properties, like new display options, painting your own images from JavaScript as backgrounds, borders and elsewhere images can be used, and so on. And all in ways that don’t hugely impact the browser performance the way for example JavaScript based property animation does?

Enter a brand new (still very much under development but so cool we have to talk about it even at this stage) CSS feature, code-named Houdini (if you’re not entirely familiar with Harry Houdini, he was a hugely popular illusionist and escape-artist from the early 20th Century. And why ‘Houdini’? Because it allows you to escape the current constraints of CSS (yes, a dad joke)).

There’s a great article going into some detail about Houdini at our good friends Smashing Magazine from a few weeks back (yep, it’s still very new), but this is definitely something we feel will arrive sooner than you might think.

So this week’s video of the week is from a recent post-Respond “mega meetup” with MelbCSS, Be Responsive and MelbJS, featuring Ryan Seddon on Houdini.

Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week’s best reading and watching on all things Web. And you’ll get a complimentary digital copy of our brand new magazine, Scroll.


The post Video of the Week: Ryan Seddon–Houdini appeared first on Web Directions.

Minutes Telecon 2016-05-04

Source: CSS WG Blog Dael Jackson • 04 May 2016 11:54 PM

Full Minutes

Minutes Telecon 2016-04-27

Source: CSS WG Blog Dael Jackson • 27 April 2016 11:18 PM

Full Minutes

Minutes Telecon 2016-04-13

Source: CSS WG Blog Dael Jackson • 13 April 2016 11:58 PM

Full Minutes

Minutes Sydney F2F 2016-02-03 Part I: 2017 F2F Meetings, Scroll-linked Animations, Fill & Stroke on CSS Text

Source: CSS WG Blog Dael Jackson • 12 April 2016 11:25 PM

2017 F2F Meetings

Full Minutes

Scroll-linked Animations

Full Minutes || Spec Referenced

Fill & Stroke on CSS Text

Minutes Sydney F2F 2016-02-03 Part II: SVG Text Issues, CSS Masking, Filters, Gradients & Dithering, Investigation about JS API for realizing Level of Details, Transitions and Animations, Matrices

Source: CSS WG Blog Dael Jackson • 12 April 2016 11:25 PM

SVG Text Issues

Full Minutes

CSS Masking

Full Minutes || Spec Referenced

Filters

Full Minutes || Spec Referenced

Gradients & Dithering

Full Minutes

Investigation about JS API for realizing Level of Details

Full Minutes

Transitions and Animations

Full Minutes

Matrices

Full Minutes

Minutes Sydney F2F 2016-02-02 Part II: Behavior of contains:paint and overflow:clip, text-overflow and resize properties; CSS Text; Exclusions and bidi; Snap Points; bookmark-level: auto; Sizing

Source: CSS WG Blog Dael Jackson • 12 April 2016 10:48 PM

Behavior of contains:paint and overflow:clip, text-overflow and resize properties

Full Minutes || Spec Referenced

CSS Text

Full Minutes || Spec Referenced

Exclusions and bidi

Full Minutes || Spec Referenced

Snap Points

Full Minutes || Spec Referenced

bookmark-level: auto

Full Minutes || Spec Referenced

Sizing

Full Minutes || Spec Referenced

Minutes Sydney F2F 2016-02-02 Part I: A report on research into automatic layout, CSS Text, Round Display

Source: CSS WG Blog Dael Jackson • 12 April 2016 10:44 PM

A report on research into automatic layout

Full Minutes

CSS Text

Full Minutes || Spec Referenced

Round Display

Full Minutes || Spec Referenced

The CSS WG published the first draft of Cascading Style Shee…

Source: W3C's Cascading Style Sheets home page12 April 2016 12:00 AM

12 Apr 2016 The CSS WG published the first draft of Cascading Style Sheets Level 2 Revision 2 (CSS 2.2), essentially CSS 2.1 with the errata applied, and which will eventually, after review, replace CSS 2.1.

Minutes Telecon 2016-04-06

Source: CSS WG Blog Dael Jackson • 06 April 2016 11:08 PM

Full Minutes

(Re)introducing Scroll Magazine

Source: Web Directions Blog John • 06 April 2016 09:00 PM

tldr; we’ve relaunched Scroll Magazine, featuring profiles and interviews, indepth articles, and more. Read on for more details, or get yourself a digital copy of our first edition now.

I came to the Web in its early days somewhat by accident.

I was developing a hypertext system, Palimpsest (yes, ironically, a competitor of the Web, in a sense), and the Web it seemed, for all its shortcomings as hypertext, represented a new way for software publishers to distribute their applications, compared to the traditional model of packaged software sold in stores. So we built a site, with screen shots and feature lists, provided our software for download, and then wondered how on earth we could get people to find it. We hit on an approach which is now known as content marketing, providing great resources to help people find and work with what was excitingly called ‘etext’ back in the early 90s. Of course, to build our site we needed to learn HTML, and later CSS, and along that journey we realised that there weren’t particularly good tools for working with CSS, then still in its earliest days, nor much to help you learn, deal with browser quirks, and otherwise master Web development. And so I built one of the earliest CSS editors, Style Master, and in keeping with our marketing strategy, a whole raft of online courses and resources, which led to my involvement in the early Web Standards Project “CSS Samurai”, and to the original css-discuss mailing list, which we helped start with Eric Meyer, among other initiatives to help people become better web designers.

Hero-Image_#ccccc

A few years later, again largely without a lot of long term thinking, we founded what became Web Directions, an event that predates – and provided a blueprint for – almost all the conferences for Web designers and developers around the world. At Web Directions, we’ve often featured speakers right at the beginning of their careers who have gone on to become among our industry’s most highly respected experts, and have seen the launch of incredibly influential ideas like OOCSS (Web Directions North 2009) and “The New Aesthetic” (Web Directions South 2012). I don’t list these in many ways happy accidents to blow our trumpet here at Web Directions but, among other things, to point out there is no master plan; rather, a series of inspirations that, to be honest, we often didn’t realise the value of and on more than one occasion abandoned before the idea had the opportunity to really come to fruition. One of the ideas we abandoned that perhaps we should have stuck with a little longer at is (either literally or figuratively) in your hands right now: Scroll. The thinking behind Scroll was, and is, akin to how we think about everything we do at Web Directions. How can we do what we do differently, better? What are we doing ritualistically, simply because we’ve always done it like this, or because it’s always been done this way? Scroll started by us asking ourselves, “What is the point of a program at an event?” The bios you read are all online (and in an age of ubiquitous mobile much more readily accessible there than on paper).

The session descriptions are, as well. All the relevant information about the event is on the attendee’s lanyard, or just a link away on their phone. So why are we going to the effort and expense of designing something essentially useless? Something that wastes trees? But what if we could create something of real and lasting value? That captured the ideas that are at the heart of our event, and let people learn more about the speakers they’ve seen and their thinking? Something that can be shared with colleagues and peers, and which would also take some of the value of an event out far beyond the audience in the room? That’s our ambition with Scroll. We’ve interviewed some of our amazing speakers and tried to get behind their thinking, to their motivations and inspirations. And we’ve tapped some of the speakers to share some of their ideas and techniques more deeply in print, just for this magazine. As I write this, Ricky Onsman, who has literally been to more of our events than anyone, and who has recently – to our great good fortune – come on board as editor for Scroll and all of the content at Web Directions, is ridiculously hard at work racing to complete this first (or third) edition, and so I’m waiting, excited, though a little anxiously, to see how it turns out. But we’re definitely going to stick the course this time, and there’ll be editions of Scroll associated with all our major upcoming events. I hope you enjoy it. Let us know what you think!

The post (Re)introducing Scroll Magazine appeared first on Web Directions.

Minutes Telecon 2016-03-30

Source: CSS WG Blog Dael Jackson • 30 March 2016 11:56 PM

Full Minutes

Minutes Telecon 2016-03-23

Source: CSS WG Blog Dael Jackson • 30 March 2016 11:48 PM

Full Minutes

Minutes Telecon 2016-03-16

Source: CSS WG Blog Dael Jackson • 30 March 2016 11:35 PM

Full Minutes

The CSS WG updated the Working Drafts of CSS Scroll Snap Poi…

Source: W3C's Cascading Style Sheets home page29 March 2016 12:00 AM

29 Mar 2016 The CSS WG updated the Working Drafts of CSS Scroll Snap Points Module Level 1 and CSS Device Adaptation Module Level 1

Historical maps of Europe, 362-830 AD

Source: ishida blog » cssr12a • 25 March 2016 11:37 AM

Picture of the page in action.
>> See the chronology
>> See the maps

This blog post introduces the first of a set of historical maps of Europe that can be displayed at the same scale so that you can compare political or ethnographic boundaries from one time to the next. The first set covers the period from 362 AD to 830 AD.

A key aim here is to allow you to switch from map to map and see how boundaries evolve across an unchanging background.

The information in the maps is derived mostly from information in Colin McEvedy’s excellent series of books, in particular (so far) The New Penguin Atlas of Medieval History, but also sometimes brings in information from the Times History of Europe. Boundaries are approximate for a number of reasons: first, in the earlier times especially, the borders were only approximate anyway, second, I have deduced the boundary information from small-scale maps and (so far) only a little additional research, third, the sources sometimes differ about where boundaries lay. I hope to refine the data during future research, in the meantime take this information as grosso modo.

The link below the picture takes you to a chronological summary of events that lie behind the changes in the maps. Click on the large dates to open maps in a separate window. (Note that all maps will open in that window, and you may have to ensure that it isn’t hidden behind the chronology page.)

The background to the SVG overlay is a map that shows relief and rivers, as well as modern country boundaries (the dark lines). These were things which, as good as McEvedy’s maps were, I was always missing in order to get useful reference points. Since the outlines and text are created in SVG, you can zoom in to see details.

This is just the first stage, and the maps are still largely first drafts. The plan is to refine the details for existing maps and add many more. So far we only deal with Europe. In the future I’d like to deal with other places, if I can find sources.

Respond Speaker insight: Sara Soueidan

Source: Web Directions Blog John • 23 March 2016 01:25 AM

As we ramp up for Respond, our Web Design focussed conference, taking place in Sydney and Melbourne next month (we’ve still got some tickets, and really significant savings for freelancers and those who work at Not for Profit organisations) we’ll be giving you a little insight into some of our speakers.

First up, Sara Soueidan has in the last couple of years really made a name for herself focussing particularly, but not exclusively on SVG. At Respond she’ll be talking about the combination of SVG and CSS, and how together these make for incredibly powerful expressive design tools, but we also wanted to learn a little more about what makes Sara tick. Among other things we asked her to describe the first time she gave a presentation on a web topic.

sarah Sooueidan speaking at Respond

Oh, that was a fantastically scary time!! It was so exciting but also so intimidating that I had a moment on stage where I forgot the particular word that I wanted to say and ended up with a thought in my head that said “What are you doing here?! Just get off the stage and go sit back at the table”. Ha ha. It was the first time I ever spoke in English continuously for more than 30 minutes, so it wasn’t easy and I forgot quite a lot of words on stage, but one of them was the worst, so the idea crossed my mind that I should just walk off.

But then I remembered a tip my friend Bruce Lawson gave me via Twitter right before I got on stage: ‘Just breathe. And keep going.’ So I literally did that: I took a deep breath, rephrased what I was going to say and just kept going. By the time I got to the last section I couldn’t believe it, so I ended up saying ìI can’t believe I got to the last section’ … out loud … to the audience!

After the talk, I felt absolutely nothing. It was like I hadn’t even given a talk. You know how you feel numb after a dentist’s visit and only start feeling the pain after the pain-killer effect goes away? Thatís exactly how I felt. For about an hour, I felt like I hadn’t even been on stage at all. It was the fantastic feedback I got from the super nice attendees after the talk that sort of ‘woke me up’ from my trance, and that’s when I realised I must have done a fairly good job.

I hated watching myself speak and said I’d never speak again after watching the video because I was too embarrassed. But, well, you get over it after a while, and the excitement of being on stage sucked me back in just four months after the first talk, and I’ve kept going ever since.

I know Sara will be amazing, and like many of our sessions, worth the price of admission alone. Come and see her, along with a fantastic array of local and international speakers.

The post Respond Speaker insight: Sara Soueidan appeared first on Web Directions.

UniView now supports Unicode 9 beta

Source: ishida blog » cssr12a • 19 March 2016 10:22 PM

Picture of the page in action.
>> Use the picker

UniView now supports the characters introduced for the beta version of Unicode 9. Any changes made during the beta period will be added when Unicode 9 is officially released. (Images are not available for the Tangut additions, but the character information is available.)

It also brings in notes for individual characters where those notes exist, if Show notes is selected. These notes are not authoritative, but are provided in case they prove useful.

A new icon was added below the text area to add commas between each character in the text area.

Links to the help page that used to appear on mousing over a control have been removed. Instead there is a noticeable, blue link to the help page, and the help page has been reorganised and uses image maps so that it is easier to find information. The reorganisation puts more emphasis on learning by exploration, rather than learning by reading.

Various tweaks were made to the user interface.

Respond ’16, the full, amazing lineup

Source: Web Directions Blog John • 18 March 2016 02:57 AM

Earlier this week we announced the complete lineup for our Web design focussed conference Respond, featuring a truly stellar lineup you’d be hard pressed to find anywhere in the World, fresh from such events as An Event Apart, and Smashing Conference, as well as wonderful locals, some who’ve spoken all over the world, others we’ve only recently unearthed. We’ve worked hard to bring together this diverse lineup.

Then there are our focused sessions, where in 20 minutes we really dig deeply into a topic of importance.

The post Respond ’16, the full, amazing lineup appeared first on Web Directions.

CSSOM and CSSOM View Drafts Updated

Source: CSS WG Blog Simon Pieters • 17 March 2016 11:38 AM

The CSS Working Group has published updated Working Drafts of CSSOM and CSSOM View. The CSSOM specification defines APIs for Media Queries, Selectors, CSS. The CSSOM View Module defines APIs for reading and manipulating the layout, scrolling, window size and position, etc.

Some APIs in CSSOM that have not been widely implemented have been removed; alternative stylesheet APIs, pseudo(), cascadedStyle, etc. In CSSOM View a new API document.scrollingElement is added to help authors avoid relying on which of html or body reflects the viewport for .scrollTop et. al.
Changes since the last Working Draft are listed in the CSSOM Changes section and CSSOM View Changes section.

As always, please send feedback to the (archived) public mailing list www-style@w3.org with the spec code ([cssom] or [cssom-view]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

The CSS WG updated the Working Drafts of CSS Object Model (C…

Source: W3C's Cascading Style Sheets home page17 March 2016 12:00 AM

17 Mar 2016 The CSS WG updated the Working Drafts of CSS Object Model (CSSOM) and CSSOM View Module

Feeds

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.

fantasai

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