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

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

Minutes Sydney F2F 2016-02-01 Part II: Writing Modes, Line Grid, Overflow

Source: CSS WG Blog Dael Jackson • 13 March 2016 01:39 PM

Writing Modes

Full Minutes || Spec Referenced

Line Grid

Minutes Sydney F2F 2016-02-01 Part I: Web Compat Challenges, Tables, Colors, Transforms

Source: CSS WG Blog Dael Jackson • 13 March 2016 01:36 PM

Web Compat Challanges

Full Minutes

Tables

Full Minutes || Spec Referenced

Colors

Full Minutes || Spec Referenced

Transforms

Full Minutes || Spec Referenced

Minutes Telecon 2016-03-09

Source: CSS WG Blog Dael Jackson • 13 March 2016 01:30 PM

Full Minutes

More updates for the Egyptian hieroglyph picker

Source: ishida blog » cssr12a • 07 March 2016 11:21 AM

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

I’ve been doing more work over the weekend.

The data behind the keyword search has now been completely updated to reflect descriptions by Gardiner and Allen. If you work with those lists it should now be easy to locate hieroglyphs using keywords. The search mechanism has also been rewritten so that you don’t need to type keywords in a particular order for them to match. I also strip out various common function words and do some other optimisation before attempting a match.

The other headline news is the addition of various controls above the text area, including one that will render MdC text as a two-dimensional arrangement of hieroglyphs. To do this, I adapted WikiHiero’s PHP code to run in javascript. You can see an example of the output in the picture attached to this post. If you want to try it, the MdC text to put in the text area is:
anx-G5-zmA:tA:tA-nbty-zmA:tA:tA-sw:t-bit:t- -zA-ra:.-mn:n-T:w-Htp:t*p->-anx-D:t:N17-!

The result should look like this:

Picture of hieroglyphs.

Other new controls allow you to convert MdC text to hieroglyphs, and vice versa, or to type in a Unicode phonetic transcription and find the hieroglyphs it represents. (This may still need a little more work.)

I also moved the help text from the notes area to a separate file, with a nice clickable picture of the picker at the top that will link to particular features. You can get to that page by clicking on the blue Help box near the bottom of the picker.

Finally, you can now set the text area to display characters from right to left, in right-aligned lines, using more controls > Output direction. Unfortunately, i don’t know of a font that under these conditions will flip the hieroglyphs horizontally so that they face the right way.

For more information about the new features, and how to use the picker, see the Help page.

CSS Round Display Level 1 Updated

Source: CSS WG Blog Jihye Hong • 03 March 2016 08:31 AM

The CSS Working Group has published an updated Working Draft of CSS Round Display

This module describes CSS extensions to support a round display.

CSS Round Display has made progress on polar positioning since the FPWD.
Polar positioning becomes to be used in absolute positioning and several new features related to it are added.
Resolutions from the last CSSWG F2F are incorporated to the updated WD.

Changes since the last Working Draft are listed in the Changes section

There are open issues about the media query and polar positioning, but I’m sure those will be fixed on the next publication.

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

Minutes Telecon 2016-03-02

Source: CSS WG Blog Dael Jackson • 03 March 2016 12:38 AM

Full Minutes

CSS Flexbox Level 1 Revision 1 Candidate Recommendation

Source: CSS WG Blog fantasai • 02 March 2016 11:19 PM

The CSS Working Group has published an updated Candidate Recommendation of CSS Flexible Box Layout Module Level 1. Flexbox is a new layout model for CSS. The contents of a flex container can be laid out in any direction, can be reordered, can be aligned and justified horizontally and vertically within their container, and can “flex” their sizes and positions to respond to the available space.

This update closes the “Proposed Edited Candiate Recommendation” cycle of LCWDs, and puts Flexbox into the new W3C Process at the Candidate Recommendation level. A side-effect of this process has been to show the slowing rate of issues filed against Flexbox as the spec has matured (which allowed us to hit zero issues long enough to re-transition to CR).

Exact diff-marked changes, and their justifications, for the entire Candidate Recommendation revision cycle (since the original CR publication in 2012) are available in the changes section. A Disposition of Comments resulting in the latest set of changes (since the May 2015 publication) is also available.

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

Lots of thanks to the implementers who have been working with the spec, and with us, to improve the state of the spec together with their implementations. This module has not been easy to produce, and we are very grateful for their hard work, intelligence, and diligence in helping us build a new layout system for the Web!

(Note also that this spec is the first spec to be published with the new W3C specification style sheets. If you have comments on the new style, please file them at tr-design on GitHub or send them to spec-prod@w3.org or send them otherwise to fantasai.)

Minutes Telecon 2016-02-17

Source: CSS WG Blog Dael Jackson • 02 March 2016 11:04 PM

Full Minutes

The CSS WG published a new Candidate Recommendation of CSS F…

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

1 Mar 2016 The CSS WG published a new Candidate Recommendation of CSS Flexible Box Layout Module Level 1 and a Working Draft of CSS Round Display Level 1

Egyptian hieroglyph picker updated

Source: ishida blog » cssr12a • 29 February 2016 12:45 PM

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

Over the weekend I added a set of new features to the picker for Egyptian Hieroglyphs, aimed at making it easier to locate a particular hieroglyph. Here is a run-down of various methods now available.

Category-based input

This was the original method. Characters are grouped into standard categories. Click on one of the orange characters, chosen as a nominal representative of the class, to show below all the characters in that category. Click on one of those to add it to the output box. As you mouse over the orange characters, you’ll see the name of the category appear just below the output box.

Keyword-search-based input

The app associates most hieroglyphs with keywords that describe the glyph. You can search for glyphs using those keywords in the input field labelled Search for.

Searching for ripple will match both ripple and ripples. Searching for king will match king and walking. If you want to only match whole words, surround the search term with colons, ie. :ripple: or :king:.

Note that the keywords are written in British English, so you need to look for sceptre rather than scepter.

The search input is treated as a regular expression, so if you want to search for two words that may have other words between them, use .*. For example, ox .* palm will match ox horns with stripped palm branch.

Many of the hieroglyphs have also been associated with keywords related to their use. If you select Include usage, these keywords will also be selected. Note that this keyword list is not exhaustive by any means, but it may occasionally be useful. For example, a search for Anubis will produce 𓁢 𓃢 𓃣 𓃤 .

(Note: to search for a character based on the Unicode name for that character, eg. w004, use the search box in the yellow area.)

Searching for pronunciations

Many of the hieroglyphs are associated with 1, 2 or 3 consonant pronunciations. These can be looked up as follows.

Type the sequence of consonants into the output box and highlight them. Then click on Look up from Latin. Hieroglyphs that match that character or sequence of characters will be displayed below the output box, and can be added to the output box by clicking on them. (Note that if you still have the search string highlighted in the output box those characters will be replaced by the hieroglyph.)

You will find the panel Latin characters useful for typing characters that are not accessible via your keyboard. The panel is displayed by clicking on the higher L in the grey bar to the left. Click on a character to add it to the output area.

For example, if you want to obtain the hieroglyph 𓎝, which is represented by the 3-character sequence wꜣḥ, add wꜣḥ to the output area and select it. Then click on Latin characters. You will see the character you need just above the SPACE button. Click on that hieroglyph and it will replace the wꜣḥ text in the output area. (Unhighlight the text in the output area if you want to keep both and add the hierglyph at the cursor position.)

Input panels accessed from the vertical grey bar

The vertical grey bar to the left allows you to turn on/off a number of panels that can help create the text you want.

Latin characters. This panel displays Latin characters you are likely to need for transcription. It is particularly useful for setting up a search by pronunciation (see above).

Latin to Egyptian. This panel also displays Latin characters used for transcription, but when you click on them they insert hieroglyphs into the output area. These are 24 hieroglyphs represented by a single consonant. Think of it as a shortcut if you want to find 1-consonant hieroglyphs by pronunciation.

Where a single consonant can be represented by more than one hieroglyph, a small pop-up will present you with the available choices. Just click on the one you want.

Egyptian alphabet. This panel displays the 26 hieroglyphs that the previous panel produces as hieroglyphs. In many cases this is the quickest way of typing in these hieroglyphs.

The CSS WG updated the Working Draft of Media Queries Level …

Source: W3C's Cascading Style Sheets home page26 February 2016 12:00 AM

26 Feb 2016 The CSS WG updated the Working Draft of Media Queries Level 4

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