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 2017-06-21

Source: CSS WG BlogDael Jackson • 22 June 2017

Full Minutes

What’s new in Chromium 59 and Opera 46

Source: Dev.OperaSimon Pieters • 22 June 2017

Opera 46 (based on Chromium 59) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog post. Here’s what it means for web developers.

Animated PNG

Opera now supports animated PNG, or APNG for short. APNG is a file format that works similarly to GIF. The difference is that APNG is smaller and supports both 24-bit images and 8-bit transparency. It has become quite popular recently, particularly since Apple adopted the APNG file format for the iOS 10 iMessage apps. APNG was also supported in Presto-based Opera 12.

Watch the APNG demo and learn more about this format.

SVG favicons

This was actually added in Opera 44, but we missed to write about it!

This might still be a bit rough in the edges, but in general SVG favicons should now work in Opera! (Not yet in Chromium.) To see this in action, check some of the WHATWG standards which use SVG favicons. Firefox also supports SVG favicons, and it was also supported in Presto-based Opera 12.

Expensive background tab throttling

Opera now throttles expensive background tabs. This reduces the processing power required for background tabs and improves battery life and browsing performance. Try it out yourself with this background timer throttling demo.

As a web developer, you also can help with reducing the work that your page or app does while being in a background tab by using requestAnimationFrame instead of timers to drive animations, and the Page Visibility API to stop unnecessary work when the page is hidden.

Service worker navigation preload

The Service Worker navigation preload API enables the browser to preload navigation requests while a service worker is starting up. See Speed up Service Worker with Navigation Preloads by Jake Archibald for more information.

Other features in this release

Deprecations and interoperability improvements

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.

Responsive Design for Motion

Source: Surfin' SafariJames Craig • 16 June 2017

WebKit now supports the prefers-reduced-motion media feature, part of CSS Media Queries Level 5, User Preferences. The feature can be used in a CSS @media block or through the window.matchMedia() interface in JavaScript. Web designers and developers can use this feature to serve alternate animations that avoid motion sickness triggers experienced by some site visitors.

To explain who this media feature is for, and how it’s intended to work, we’ll cover some background. Skip directly to the code samples or prefers-reduced-motion demo if you wish.

Motion as a Usability Tool

CSS transforms and animations were proposed by WebKit engineers nearly a decade ago as an abstraction of Core Animation concepts wrapped in a familiar CSS syntax. The standardization of CSS Transforms/CSS Animations and adoption by other browsers helped pave the way for web developers of all skill levels. Richly creative animations were finally within reach, without incurring the security risk and battery cost associated with plug-ins.

The perceptual utility of appropriate, functional motion can increase the understandability and —yes— accessibility of a user interface. There are numerous articles on the benefits of animation to increase user engagement:

In 2013, Apple released iOS 7, which included heavy use of animated parallax, dimensionality, motion offsets, and zoom effects. Animation was used as tool to minimize visual user interface elements while reinforcing a user’s understanding of their immediate and responsive interactions with the device. New capabilities in web and native platforms like iOS acted as a catalyst, leading the larger design community to a greater awareness of the benefits of user interface animation.

Since 2013, use of animation in web and native apps has increased by an order of magnitude.

Motion is Wonderful, Except When it’s Not

Included in the iOS accessibility settings is a switch titled “Reduce Motion.” It was added in iOS 7 to allow users the ability to disable parallax and app launching animations. In 2014, iOS included public API for native app developers to detect Reduce Motion (iOS, tvOS) and be notified when the iOS setting changed. In 2016, macOS added a similar user feature and API so developers could both detect Reduce Motion (macOS) and be notified when the macOS pref changed. The prefers-reduced-motion media feature was first proposed to the CSS Working Group in 2014, alongside the release of the iOS API.

Wait a minute! If we’ve established that animation can be a useful tool for increasing usability and attention, why should it ever be disabled or reduced?

The simplest answer is, “We’re not all the same.” Preference is subjective, and many power users like to reduce UI overhead even further once they’ve learned how the interface works.

The more important, objective answer is, “It’s a medical necessity for some.” In particular, this change is required for a portion of the population with conditions commonly referred to as vestibular disorders.

Vestibular Spectrum Disorder

Vestibular disorders are caused by problems affecting the inner ear and parts of the brain that control balance and spatial orientation. Symptoms can include loss of balance, nausea, and other physical discomfort. Vestibular disorders are more common than you might guess: affecting as many as 69 million people in the United States alone.

Most people experience motion sickness at some point in their lives, usually while traveling in a vehicle. Consider the last time you were car-sick, sea-sick, or air-sick. Nausea can be a symptom of situations where balance input from your inner ear seems to conflict with the visual orientation from your eyes. If your senses are sending conflicting signals to your brain, it doesn’t know which one to trust. Conflicting sensory input can also be caused by neurotoxins in spoiled food, hallucinogens, or other ingested poisons, so a common hypothesis is that these conflicting sensory inputs due to motion or vestibular responses lead your brain to infer its being poisoned, and seek to expel the poison through vomiting.

Whatever the underlying cause, people with vestibular disorders have an acute sensitivity to certain motion triggers. In extreme cases, the symptoms can be debilitating.

Vestibular Triggers

The following sections include examples of common vestibular motion triggers, and variants. If your site or web application includes similar animations, consider disabling or using variants when the prefers-reduced-motion media feature matches.

Trigger: Scaling and Zooming

Visual scaling or zooming animations give the illusion that the viewer is moving forward or backward in physical space. Some animated blurring effects give a similar illusion.

Note: It’s okay to keep many real-time, user-controlled direct manipulation effects such as pinch-to-zoom. As long as the interaction is predictable and understandable, a user can choose to manipulate the interface in a style or speed that works for their needs.

Example 1: Mouse-Triggered Scaling

How to Shoot on iPhone incorporates a number of video and motion effects, including a slowly scaling poster when the user’s mouse hovers over the video playback buttons.

The team implemented prefers-reduced-motion to disable the scaling effect and background video motion.

Example 2: 3D Zoom + Blur

The macOS web site simulates flying away from Lone Pine Peak in the Sierra Nevada mountain range. A three-dimensional dolly zoom and animated blur give the viewer a sense that physical position and focal depth-of-field is changing.

In mobile devices, or in browsers that can’t support the more complicated animation, the effect is reduced to a simpler scroll view. By incorporating similar visual treatment, the simpler variant retains the original design intention while removing the effect. The same variant could be used with prefers-reduced-motion to avoid vestibular triggers.

Update May 25, 2017: The macOS web site has been modified to support reduced motion when preferred.

Trigger: Spinning and Vortex Effects

Effects that use spiraling or spinning movements can cause some people with vestibular disorders to lose their balance or vertical orientation.

Example 3: Spinning Parallax Starfield

Viljami Salminen Design features a spinning, background star field by default.

It has incorporated prefers-reduced-motion to stop the spinning effect for users with vestibular needs. (Note: The following video is entirely motionless.)

Trigger: Multi-Speed or Multi-Directional Movement

Parallax effects are widely known, but other variants of multi-speed or multi-directional movement can also trigger vestibular responses.

Example 4: iOS 10 Site Scrolling

The iOS 10 site features images moving vertically at varying speeds.

A similar variant without the scroll-triggered image offsets could be used with prefers-reduced-motion to avoid vestibular triggers.

Update May 25, 2017: The iOS 10 site has been modified to support reduced motion when preferred.

Trigger: Dimensionality or Plane Shifting

These animations give the illusion of moving two-dimensional (2D) planes in three-dimensional (3D) space. The technique is sometimes referred to as two-and-a-half-dimensional (2.5D).

Example 5: Plane-Shifted Scrolling

Apple’s Environment site features a animated solar array that tilts as the page scrolls.

The site supports a reduced motion variant where the 2.5D effect remains a still image.

Trigger: Peripheral Motion

Horizontal movement in the peripheral field of vision can cause disorientation or queasiness. Think back to the last time you read a book while in a moving vehicle. The center of your vision was focused on the text, but there was constant movement in the periphery. This type of motion is fine for some, and too much to stomach for others.

Example 6: Subtle, Constant Animation Near a Block of Text

After scrolling to the second section on Apple’s Environment site, a group of 10-12 leaves slowly floats near a paragraph about renewable energy.

In the reduced motion variant, these leaves are stationary to prevent peripheral movement while the viewer focuses on the nearby text content.

Take note that only the animations known to be problematic have be modified or removed from the site. More on that later.

Using Reduce Motion on the Web

Now that we’ve covered the types of animation that can trigger adverse vestibular symptoms, let’s cover how to implement the new media feature into your projects.

CSS @Media Block

An @media block is the easiest way to incorporate motion reductions into your site. Use it to disable or change animation and transition values, or serve a different background-image.

@media (prefers-reduced-motion) {
  /* adjust motion of 'transition' or 'animation' properties */

Review the prefers-reduced-motion demo source for example uses.

MediaQueryList Interface

Animations and DOM changes are sometimes controlled with JavaScript, so you can leverage the prefers-reduced-motion media feature with window.matchMedia and register for an event listener whenever the user setting changes.

var motionQuery = matchMedia('(prefers-reduced-motion)');
function handleReduceMotionChanged() {
  if (motionQuery.matches) {
    /* adjust motion of 'transition' or 'animation' properties */
  } else { 
    /* standard motion */
handleReduceMotionChanged(); // trigger once on load if needed

Review the prefers-reduced-motion demo source for example uses.

Using the Accessibility Inspector

When refining your animations, you could toggle the iOS Setting or macOS Preference before returning to your app to view the result, but this indirect feedback loop is slow and tedious. Fortunately, there’s a better way.

The Xcode Accessibility Inspector makes it easier to debug your animations by quickly changing any visual accessibility setting on the host Mac or a tethered device such as an iPhone.

  1. Attach your iOS device via USB.
  2. Select the iOS device in Accessibility Inspector.
  3. Select the Settings Tab.

Alternate closed-captioned version of the Accessibility Inspector demo below.

Don’t Reduce Too Much

In some cases, usability can suffer when reducing motion. If your site uses a vestibular trigger animation to convey some essential meaning to the user, removing the animation entirely may make the interface confusing or unusable.

Even if your site uses motion in a purely decorative sense, only remove the animations you know to be vestibular triggers. Unless a specific animation is likely to cause a problem, removing it prematurely only succeeds in making your site unnecessarily boring.

Consider each animation in its context. If you determine a specific animation is likely to be a vestibular trigger, consider serving an alternate, simpler animation, or display another visual indicator to convey the intended meaning.


  1. Motion can be a great tool for increasing usability and engagement, but certain visual effects trigger physical discomfort in some viewers.
  2. Avoid vestibular trigger animations where possible, and use alternate animations when a user enables the “Reduce Motion” setting. Try out these settings, and use the new media feature when necessary. Review the prefers-reduced-motion demo source for example uses.
  3. Remember that the Web belongs to the user, not the author. Always adapt your site to fit their needs.

More Information

Code Leaders 17 Launch

Source: Web Directions BlogJohn • 16 June 2017

We can see that more and more engineers and developers are moving into positions where they are expected to have and develop managerial skills.

But managing teams of devs can involve unique circumstances and require specialised skills.

That’s why we invented Code Leaders.

Running in conjunction with our long standing, highly regarded Code Conference for front end engineers and JavaScript developers, Code Leaders focuses on what senior engineering decision makers need to know about right now.

As the things we build and the teams and organisations that build them become ever more complex, technical knowledge and capabilities simply aren’t enough. Code Leaders is designed for engineering and development leaders, senior developers, lead engineers, engineering managers, CTOs.

It doesn’t matter so much what your role is called, if you’re responsible for building and leading teams, and making strategic decisions about the technologies your company or organisations uses, Code Leaders is designed for you.

Code Leaders takes place over a single, intensive day, and features real world experts addressing key challenges of technology, leadership and developing, maintaining and growing great engineering teams.

There’s full information on the website, including registration and some great pricing options, but here’s a brief overview of what you can expect from Code Leaders.

Session 1: Technology

In this session, we’ll look at the current state, and near term developments of the core technologies of the web: JavaScript, HTML, CSS, SVG and the browser’s APIs, from two of the world’s leading experts.

JavaScript: Now and Next: Brian Terlson

Code Leaders - Brian Terlson

Where is JavaScript at right now, in 2017? And where is it headed in the near future? What changes will most impact the way you work in the coming years? How can you get involved in the process?

The State of Front End Technologies: Chris Lilley

Code Leaders - Chris Lilley

In our era of Web Apps, where JavaScript seems paramount, the core technologies of the web: HTML, CSS, SVG, and the browser’s DOM APIs still very much have a place when developing for the web. Chris Lilley gives us a sense of what’s coming for the foundations of the web platform.

Session 2: Best Practice

In this session, we’ll look at how networks impact performance, and security, and the architecture of Web Apps, again with two world leaders in these fields.

The Changing Face of Loading Resources: Andrew Betts

Code Leaders - Andrew Betts

The underlying transport mechanisms of the web, including HTTP and TCP are being overhauled. This session looks at the evolution of these largely out-of-sight but incredibly important protocols, with huge implications for performance and security for today’s web.

Modern Web App Architectures: Zero Cho

Code Leaders - Zero Cho

What is the architecture of complex Web Apps? Few apps work at the scale of Twitter, with hundreds of millions of users, and billions of messages a month. Hear about the architecture, and lessons learned building Twitter Lite.

Session 3: Culture

This session turns to the challenges that face senior engineering professionals and management: people, and ensuring the best from and for them. We draw on the experience of experts in building more diverse, inclusive, highly performing teams.

Re-imagining the Hiring Process: Elle Meredith & Lachlan Hardy

Code Leaders - Elle Meredith

We’ve all been on the other side of the table. A laundry list of required technologies and practices, white boarding code, logic puzzles, folks “hiring for culture fit”. But do these practices ensure the best possible hires, and ultimately the best performing teams?

Designing a Culture that Fosters Growth: Josh Duck

Code Leaders - Josh Duck

In this session Josh, now back in Australia managing a team at the ABC, shares lessons he learned working for Facebook, renowned for both its engineering prowess and also growing its engineering head count at an almost unimaginable rate over the last decade.


That’s quite a day.

Now, we’ve deliberately limited numbers for Code Leaders to ensure the greatest opportunity for participants to connect with one another, our leaders and invited experts. It’s a day for minimum screen time, and maximum connection and communication.

During the day you’ll be seated with a group of fellow participants with a balance of experience as leaders. Each table will have a facilitator, someone with significant industry experience, and will have the opportunity to put questions to our expert speakers.

Throughout the day there’ll be the opportunity for every participant to develop their leadership abilities by facilitating post-briefing discussion among your group.

You’ll also get the opportunity to connect with our leaders and invited experts during the day.

This is a new event, we’ve kept our prices low, and we do encourage you to register early. Given the number of tickets we’ve already sold, it is likely that this event will sell out.

If you’re in the business of leading or managing teams of engineers and developers – or you’d like to get to that kind of position – do not miss Code Leaders.

The post Code Leaders 17 Launch appeared first on Web Directions.

Release Notes for Safari Technology Preview 33

Source: Surfin' SafariJon Davis • 14 June 2017

Safari Technology Preview Release 33 is now available for download for macOS Sierra and betas of macOS High Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 217407-217978.




Media Streams and Capture


CSS Grid



Web Inspector

Bug Fixes

First Public WD CSS Overflow L4

Source: CSS WG Blog Florian Rivoal • 14 June 2017

The CSS WG has published an First Public Working Draft of the CSS Overflow Module Level 4.

CSS Overflow Level 4 builds upon Level 3 of the same specification, and adds:

The first of these two is a fairly self contained feature, and we encourage potential implementors or anyone interested to review it in details.

The second one is more far reaching, but also less mature, and with significant issues still open. Design level reviews are very much appreciated.

Significant changes since level 3 are listed in the change section.

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

The Full Conference Program for Code 17

Source: Web Directions Blog John • 14 June 2017

Here, at last, is the full program for Web Directions Code 17, taking place in  Melbourne on 3-4 August.

Let me tell you, a fair bit of thinking went into this. Getting the participation of some of the world’s (and Australia’s) leading thinkers and doers in front end engineering is one thing – turning that into a two day event with a coherent structure is another altogether.

It’s not the kind of opportunity you want to waste – after all, it’s not like these seven international keynote speakers come here to Australia on a regular basis. For that matter, it’s not like our frankly impressive array of local experts can often be found together in the same place, either.

So, it’s important we give all of these speakers an opportunity to shine, and all the attendees the chance to take it all in, digest it and see how they can apply it to their own work. Because that’s our goal: to give you insights that help you do your job better.

As always, we have a great offer for past attendees of our events, you can find the details further down.

Here we go.


Day One.

Mavo: HTML re-imagined for the era of Web Apps
Lea Verou
In an age when it seems everything is developed in JavaScript, using frameworks like Angular and React, what place is there for old fashioned HTML and CSS? Say hello to Mavo.

The State of JavaScript in 2017
Brian Terlson
The landscape of JavaScript seems to be in constant flux. Not just the frameworks and build tools we use, but the very language itself now that new versions are being released annually. But where is it at right now, in 2017? And where is it headed in the near future?

No More Awaiting for Async Functions
Erin Zimmer
Dealing with asynchronous functions has been a bit of a problem since the early days of JavaScript. Promises help a bit, but they’re still limited in some ways. Async functions make writing async code simpler, and let you do some things that aren’t so easy with promises.

Modules in Motion
Damon Oehlman
Modularity in web application code has been a topic of much discussion for a long, long time. Implementing solutions that provide a useful approach have consumed many development hours. We are converging on a single solution now in the form of ES6 modules.

It’s Time to Talk About Type Checkers
Ben Teese
Static type checkers have been a part of the JavaScript ecosystem for many years now, and with Microsoft, Google and Facebook all having made major investments in tools like TypeScript and Flow, it’s probably fair to say that type checkers are here to stay.

Developing the Twitter PWA
Zero Cho
The most recent version of Twitter’s web app, Twitter Lite, was recently released. It’s a Progressive Web App, which is fast and responsive, uses less data, takes up less storage space, and supports push notifications and offline use in modern browsers.

Preact: Into the Void 0
Jason Miller
Grab a hard hat and follow me down into the internals of Preact, a tiny 3kb alternative to React. Along the way we’ll shed light on fundamentals like JSX & Virtual DOM, demystify DOM diffing, and see how keys work up-close.

The State of Web Fonts
Chris Lilley
With CSS Level 3 OpenType font features, the widely adopted WOFF format, Chromatic Fonts, and more recently OpenType variable fonts – a single font file that behaves like multiple fonts – the capabilities opening up for typography on the web are extraordinary.

Phew! That’s Day One: five international keynotes + three locals. Now brace yourself for Day Two.

The Power of the Network
Andrew Betts
Web developers are increasingly responsible for the performance of the sites they build, and there is now a plethora of advanced tools and services that allow developers to hone front end performance as never before. But the network can still be your biggest bottleneck.

The Road to Styled Components: CSS in Component-based Systems
Glen Maddern
Building user interfaces on the web is hard, because the web, and thus CSS, was inherently made for documents. Because UIs fundamentally are not documents, we’ve seen a mindset shift towards building component-based systems.

A Unified Styling Language
Mark Dalgleish
In the past few years, we’ve witnessed a massive increase in the amount of CSS experimentation, with ideas like CSS Modules and, controversially, the rise of CSS-in-JS. But does mixing our styles and logic run counter to the original ideas of CSS? Does it break progressive enhancement?

Traditional CSS at Scale(?)
Mandy Michael
When the team at Seven West Media redeveloped The West Australian’s digital platform in a tight 4-month deadline, they embraced the CSS they know and love with a component driven approach. The lessons Mandy learned have led her to the ultimate question: is there a better way?

CSS Architectures Q&A
MC: John Allsopp
Having heard from three of our industry’s leading front end developers, let’s dive with them into the current and future state of CSS architectures. You can help us get to the heart of one of the front end’s most pressing challenges: how do we work with style in today’s complex web creations?

Artificial Intelligence 101
Patrick Catanzariti
Every industry will be affected by AI, machine learning and voice interfaces in the coming years. Terms like “neural networks” and “deep learning” often sound complicated and sci-fi, but there are platforms and technologies out there today that can enable you to do a whole lot out of the box.

Making Modern JavaScript Frameworks Accessible
Aimee Maree Forsstrom
We have seen an increase in projects that require developers who understand accessibility. This leads us to the inevitable question: how do JavaScript frameworks address accessibility?

CSS: Current, Soon, Someday
Charlotte Jackson
Thanks to progressive enhancement, we can make use of many new CSS features, even though not browsers support them. We’ll look at examples of CSS that we can use now and what we can use with care. And it’s not all about using new CSS; we can all play a part in its development too.

Using the Web Payments API
Marcos Caceres
In this session, Mozilla’s Marcos Caceres will provide an overview of the emerging Payment Request and Payment Response browser APIs and how to integrate them into existing HTML forms.

Choosing Your Animation Adventure
Val Head
Animation has come a long way on the modern web and now we have a long list of choices for how to make things move on screen: CSS, JavaScript, SVG, the Web Animation API. With so many options, how can you be sure which is the best choice for your project?

And there you have it. There’s lots more information on the website about each session and speaker, a complete schedule to see how the timing works on each day, plus various pricing and registration options.

It’s hard to know what to get more excited about: seven international speakers, 10 locals, all the topics firing front end devs and engineers around the world and a unique Q&A session where you get to pick the brains of three of our leading code specialists.

That’s probably enough to set your brain spinning at this stage, although we’ll tell you more about what we have lined up in coming weeks, including a few special surprises. Don’t wait for that to book your tickets, though.

We’ve already sold about 33% of the registrations we have available, and we’re still more than two weeks out from the close of our Early Bird offers.

Be smart, avoid disappointment, register now.

See you in Melbourne.

The post The Full Conference Program for Code 17 appeared first on Web Directions.

Release Notes for Safari Technology Preview 31

Source: Surfin' Safari Jon Davis • 12 June 2017

Safari Technology Preview Release 31 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 216643-217407.



Layout & Rendering


Font Variations

Web Inspector


Web Driver



The Full Speaker Line-up for Code 17

Source: Web Directions BlogJohn • 08 June 2017

Here it is. The speaker line-up you’ve been waiting for. We’ve literally just confirmed our final speakers, so it’ll take another couple of days before the Code website has all the details, but here’s who’s speaking.

Web Directions Code 17

Web Directions Code 17

Chris Lilley: The first chair of the CSS Working Group and co-editor of the CSS 2 specification, the inaugural chair of the SVG Working Group and now a Technical Director at W3C.

Lea Verou: Lea is well known as a highly engaging speaker on all things front end, the author of CSS Secrets, a long standing member of the CSS Working Group, and has spoken at Web Directions events on several continents.

Brian Terlson: Brian, editor of the JavaScript standard, and implementor of the JavaScript engine in the Edge browser will bring us up to date with the current state of JavaScript, as well as where we’ll see it head next.

Web Directions Code 17

Val Head: Val will survey the full spectrum of animation options from CSS to React Motion and show which are best suited for things like state transitions, showing data, animating illustrations, or making animations responsive.

Jason MillerProlific JavaScript developer, architect and Open Sourcerer, the author of Preact, Jason will take us deep into modern browser internals, learning performance and optimisation secrets along the way.

Zero ChoZero will give us a sense of the architecture of Twitter Lite, the technologies used, and lessons learned in building the Progressive Web App version of one of the world’s most widely used web services.


Andrew Betts: Andrew is a web developer and principal developer advocate for Fastly, and is also an elected member of the W3C Technical Architecture Group, a committee that guides the development of the World Wide Web. Andrew will be talking about the power of the network.

Erin Zimmer: Erin has been a Senior Front-end Developer on the new DigitaliD project at Australia Post for the last year, after 10 years as a web developer for the federal government in Canberra.

Damon Oehlman: Damon is a web application developer who has worked on geospatial applications, WebRTC and now enjoys working on Canva. For a long time he has searched for the one module system to rule them all.

Ben Teese: Ben is a senior developer and consultant for Shine Solutions in Melbourne, Australia. He was a Java developer for 10 years before moving on to Ruby and now full-time JavaScript.

Glen Maddern: Cyber-intellectual. Creator of Front End Center. Co-creator of styled-components, CSS Modules. Over uses emoji.

Mark Dalgleish: Mark is the CSS Modules co-creator, @MelbJS organiser, and DesignOps Lead at @seekjobs.

Mandy Michael: Mandy is the Lead Front End Developer at Seven West Media in Western Australia. She is a lover of CSS and Batman and blogs about her adventures in geek fashion.

Patrick Catanzariti: Patrick is the founder of Dev Diner, a site that explores developing for emerging tech. He is a SitePoint contributing editor, an instructor at SitePoint Premium and O’Reilly, a Meta Pioneer and freelance developer.

Aimee Maree Forsstrom: Spent the past decade consulting on Content Management System builds and in research assistance (Mozilla, Massive Interactive, Southern Cross University, University of Adelaide).

Charlotte Jackson: Charlotte is a front-end developer now at Atlassian, and previously at ClearLeft. She’s worked on large and small projects for clients including Bike Register, John Lewis and Bravissimo.

Marcos Caceres: Marcos works with Mozilla’s DOM team hacking on Firefox, writes PWA-related W3C specifications, and co-chairs the W3C’s Web Incubator Community Group – all from Melbourne, Australia.

That, if we do say so ourselves, is a stunning line-up of speakers: international and local practitioners who are setting the standards for front end engineering now and into the future.

This is truly a world class conference, here, in Australia.

We’ll be telling you more about the topics being addressed in coming weeks, but rest assured we will be tackling the big and important questions about frameworks, raw code, CSS in JS, performance, PWA, security, accessibility, modules, fonts, components, types and a whole lot more.

And it won’t be all lecture style presentations, either. Expect a few surprises. Really, if you work with front end code, or work with people who do, Code is the conference you do not want to miss. Registration is now open.


Key Code Dates

Thu 15 June: Code Leaders Conference Launch

Thu 22 June: Special Announcement (sh, secret)

Fri 30 June: Early Bird discounts close

Wed 2 August: Code Leaders conference

Thu-Fri 3-4 August: Code conference

So, come and join us in Melbourne.

The post The Full Speaker Line-up for Code 17 appeared first on Web Directions.

Minutes Telecon 2017-05-31

Source: CSS WG BlogDael Jackson • 07 June 2017

Full Minutes

W3C Strategic Highlights for Spring 2017 and Advisory Committee Meeting

Source: W3C Blog Jeff Jaffe • 07 June 2017

AC 2017 logo

W3C held its annual meeting late April in Beijing. The theme of the meeting was “Vision for W3C“. During the meeting we released the W3C Strategic Highlights for Spring 2017, a comprehensive report of W3C’s vision and focus; had informative discussions from industry presenters and keynote speakers, heard about priorities of the W3C Advisory Board and the Technical Architecture Group.

My W3C Vision presentation revolved around addressing the everyday needs of Web users, advances in technology requiring the Web, industry impact and needs, and finally impact on society; and we built the entire meeting agenda to dive into the next level of detail in selected topics, presenting the four areas of excellence of W3C’s vision:

At the end of the second day, we held a vision workshop where attendees broke out into smaller groups for focused discussion, then shared reports with the full Advisory Committee. Participants called on the W3C Community to take big stands and to focus on core competencies; to look at the non-browser Web; to look at constituencies including users, developers, and industries; and to develop roadmaps showing the Web’s dependencies and sequence for adding enhancements. Some groups also noted specific technical areas they wanted to see highlighted or de-emphasized. The Strategy Team is taking this input, along with a SWOT analysis (Strengths, Weaknesses, Opportunities, and Threats), and working to build a 3-5 year strategic plan to share with the membership and community, to help in prioritizing the work we develop through the Strategy Funnel.

Håkon Wium Lie will talk about ‘CSS in print’ and Bert Bos a…

Source: W3C's Cascading Style Sheets home page02 June 2017

15 Jun 2017 Håkon Wium Lie will talk about ‘CSS in print’ and Bert Bos about ‘CSS Grid’ at the CWI in Amsterdam on the 15th of June. Registration required.

The 2017 edition of the CSS Day will take place on the 16th …

Source: W3C's Cascading Style Sheets home page02 June 2017

16 Jun 2017 The 2017 edition of the CSS Day will take place on the 16th of June (in Amsterdam). Speakers include Tab Atkins, Jen Simmons, Rachel Andrew, Håkon Wium Lie and Bert Bos.

Rewind, July 2008: Native Apps, the great leap backwards?

Source: Web Directions Blog John • 01 June 2017

Panic, developers of Transmit and many other fine software products are folks I’ve long admired.

It’s probably not well known these days, but I started my journey on the web as a Mac app developer and used the web to distribute software, which lead to my focus on web technologies, and CSS in particular, and in the absence of a decent CSS tool, Style Master, which I developed for many years.

Panic has, for 20 years, been a really successful indie app developer.

Every year they publish an annual report where they talk about their year, what they learned, their successes and challenges. Now Panic is about as successful an indie Mac development house as there is or has been, so you’d think if anyone could make a go of iPhone and iPad apps, it would be them. So it was sobering to read of their forays into iOS development.

Trying to do macOS quality work on iOS cost us a lot of time for sadly not much payoff. We love iOS, we love our iPhones, and we love our iPads. But we remain convinced that it’s not — yet? — possible to make a living selling pro software on those platforms. Which is a real bummer!

So why mention this at all? Well, over the years, I’ve addressed the issue of web versus native, admittedly often quixotically, though the need of late has been less great. Which is the better path to go down for a developer? Are native experiences inherently better? Can the web survive the onslaught of native apps? Wired magazine certainly doubted it, some years back:

But, despite the millions of apps in app stores, despite the ubiquity of apps in our consciousness, despite Apple funding a reality show – a sort of Apprentice for app developers called, appallingly, Planet of the Apps – on average, smartphone users download 0 (yep, zero) apps on average a month.

They spend most of their time in just three apps. This is a winner-takes-all economy, where companies spend hundreds of millions of dollars a year just marketing their games.

While apps will be a significant part of the mobile experience for years to come, they won’t be the apps you or anyone like you builds. The economics are broken.

But here’s the thing, and hence the title of this post. The economics were always broken.

I wrote about this in 2008, (with a follow up to continue the conversation) and if you look at the comments then (yes, back then people commented on blogs) people overwhelmingly thought I was wrong, and that iOS native apps and the app store particularly heralded a bright new day for developers.

I think my initial analysis holds up remarkably well, and I’m interested in other people’s thoughts as we look back over that time.

But if I were to refine a deeper underlying point that I didn’t make well there, or even perhaps as well understand at the time, iOS and Android platforms have, to differing degrees, incentives that are only fortuitously aligned with those who develop for the platform.

All the while, the web evolves.

Key drivers of its development are, of course, browser developers and large corporations with deep pockets, but also individuals and small groups of passionate “users” of the web. The development of new approaches like srcset by the Responsive Images Community Group, approaches that were initially resisted strongly by the more established and influential WHATWG, demonstrates that standards development can take place in very democratic ways.

Compare this to the development of APIs on, say, iOS. One afternoon, usually in May or June at Apple’s WWDC, after being developed in secret for years, they are unveiled to developers. Take it or leave it. Yes, closed commercial platforms can seem to move more quickly, when we see the results of years of work at one stroke, unlike the seemingly painstaking efforts of standards developers, out in the open.

These are two fundamentally different approaches to the development of a platform: one autocratic and one more democratic (albeit with with many of the same flaws that political democracies have: the influence of money, interest groups, and of course those willing and able to devote disproportionate amounts of time to driving the development of the standards).

To use an analogy from Artificial Intelligence, these are two hill climbing algorithms.

One, the closed approach, looks to optimise around a local maximum, to continue to polish and refine the core of the platform, with diminishing returns.

The other, the open approach, focuses more on exploring a far broader landscape, allowing us to explore potentially fear higher peaks that lie disconnected from our current place on the map.

It may be that apps are the optimal human experience of computing, though since they emerged due to the constraints imposed by limited hardware, and from paradigms of Human-Computing Interfaces decades old, the odds are that they aren’t.

Which is why the more open-ended – dare I say it – anarchic approach to exploring the landscape of possible computing (to get all Brian Eno album name style on you) is to me the more interesting and I believe the most fruitful.

And to be honest, the web seems to continue to be the best way to make a living building things with code.

The post Rewind, July 2008: Native Apps, the great leap backwards? appeared first on Web Directions.

Last Call for Comments on Media Queries Level 4

Source: CSS WG BlogFlorian Rivoal • 19 May 2017

The CSS WG has published its hopefully last Working Draft of Media Queries Level 4.

Media Queries allow authors to test and query values or features of the user agent or display device, independent of the document being rendered. They are used in the CSS @media rule to conditionally apply styles to a document, and in various other contexts and languages, such as HTML and Javascript.

Level 4 extends and supersedes the features defined in Media Queries Level 3. It brings significant improvements on the syntax, and a shift from using media types to finer-grained media features.

This is the last call for comments, as we plan to request a transition to CR at the end of June unless issues are brought up or anyone specifically requests more time for review.

Significant changes since Media Queries 3 are listed in the Changes section.

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

Updated Working Draft: Media Queries Level 4.

Source: W3C's Cascading Style Sheets home page19 May 2017

19 May 2017 Updated Working Draft: Media Queries Level 4.

Minutes Telecon 2017-05-17

Source: CSS WG BlogDael Jackson • 18 May 2017

Full Minutes

New Working Draft: CSS Logical Properties and Values Level 1…

Source: W3C's Cascading Style Sheets home page18 May 2017

18 May 2017 New Working Draft: CSS Logical Properties and Values Level 1.

Release Notes for Safari Technology Preview 30

Source: Surfin' Safari Jon Davis • 17 May 2017

Safari Technology Preview Release 30 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 215859-216643.





Web Inspector




Video Ristretto: CSS: Code Smell Sanitation – Fiona Chan

Source: Web Directions Blog John • 17 May 2017

Fiona ChanAs we look forward to Web Directions Code 17 in Melbourne this August, our Video Ristretto this week harks back to last year’s conference, where Fiona Chan delivered her presentation CSS: Code Smell Sanitation.

Fiona has long been a stalwart supporter of Web Directions – she’s one of our regular and indispensable production volunteers – and has also been a strong supporter of the community, as her involvement with SydCSS and CSSConf testifies.

Less than 20 minutes long, her talk at Code 16 not only drew much admiration on the day, but has also been one of the most watched Web Directions videos ever since.

My guess is that we all have concerns about how to clean up our own and others’ code, but we’re not always sure how to go about it – which is exactly what Fiona covers so well.


Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our once-a-week mailing list to keep up with everything happening at Web Directions. And you’ll get a complimentary digital copy of Scroll magazine.

The post Video Ristretto: CSS: Code Smell Sanitation – Fiona Chan appeared first on Web Directions.

Registrations Open for Code 17, First Speakers Announced

Source: Web Directions Blog John • 16 May 2017

We have just opened registrations for Web Directions Code 17!

For those new to it, and to remind those who know it well, Code has evolved to be the premier conference in Australia focusing on JavaScript, front end HTML/CSS, devops, engineering, web-facing programming, security, performance … in short, code.

The last time we held Code solely in Melbourne in 2015 at the same venue, we sold out quite some way in advance. We’ve kept the prices at 2015’s, so make sure you don’t miss out, register your ticket today.

Whether you call yourself a coder, a programmer, a developer or an engineer – if your job is to deliver robust, fast, secure, engaging web experiences, Web Directions Code in Melbourne from 3-4 August is for you.

Here’s why.


The Speakers

We have an extraordinary line-up of speakers planned for Code: people who can lift your professional expertise to new levels, familiarising you now with techniques and tools that will become commonplace in the near future.

Right now, we can confirm two of our leading speakers, and they are, indeed, world leaders in their fields.

Brian Terlson & Val Head

Brian Terlson is the editor of the JavaScript specification, and a long standing member of TC39, the committee standardising JavaScript. He’s also a key developer of the JavaScript engine in the Edge browser. Who better to help us see where JavaScript is today, and where the next few years will take us?

Val Head is one of the foremost experts in animation and the web anywhere. She’s written extensively on the subject, advised companies like Shopify and Automattic (creators of WordPress) and spoken all over the world. Val will survey the full spectrum of animation options from CSS to React Motion and show which are best suited for implementing state transitions, showing data, animating illustrations, or making animations responsive.

The Presentations

These are just two of about 20 amazing speakers from around the world covering everything from core JavaScript features to complex modern CSS and best practice performance. Everything you need to stay up to date in our fast changing field.

What is this Code of which you speak?

Skip it – just let me register!

We Want You to Present

Our Call For Proposals to present at Code is now open. Yes, we curate the conference, but we like to leave room for outstanding, relevant talks from local speakers, experienced or not.

Sessions are 20 minutes long, and open to Australian residents. If you’re successful, we’ll fly you to Melbourne, put you up, and treat you like any other speaker.

The Code CFP is open until 31 May.

OK, I’m interested in presenting

Code Leaders

We’re also really excited to take the wraps off a brand new event, Code Leaders, a special day-long conference preceding Code.

Code Leaders highlights the challenges being faced by a new generation of code-focused team leaders, project managers, CTOs and senior engineering professionals.

Code Leaders

The full-day conference draws on the skills and experience of some of our Code headliners as well as local expertise to explore issues of management and leadership in a code setting.

You’ll focus on technology, practice, leadership and cultural challenges in a collegial atmosphere with others facing challenges similar to your own.

Take me to your Leaders

Key Dates

31 May 
Code 17 Call for Presentations ends.

30 June 
End of Financial Year; Code and Code Leaders Early Bird ends.

2 August 
Code Leaders Conference.

3-4 August
Code Conference.


We always keep our prices as low as we can, and we have complete confidence in the quality and relevance of our speakers and their presentations, but we also know that a little incentive can sometimes make it easier to find room in a limited budget, especially if you have to convince someone else.

So, how about $200 off?  Register during the Early Bird period up to 30 June and get a massive $200 off the regular registration cost.

Hot Tip: if you need to apply your registration to the new financial year but you still want to get the Early Bird discount and the alumnus bonus, register before 30 June but pay after 1 July

Tell me more about Code 17

Embedded as a deeply Melbourne conference (and watch out soon for details of related Melbourne events), I feel this year’s Web Directions Code offers an unmissable program, one of the real highlights of the Australian developer calendar.

I look forward to telling you more in coming weeks, and I really hope to see you there.

john allsopp

The post Registrations Open for Code 17, First Speakers Announced appeared first on Web Directions.

The web-platform-tests Project

Source: W3C BlogPhilippe le Hegaret • 16 May 2017

Back in 2013, Tobie Langel wrote about testing the Open Web Platform. The vision was simple: W3C was launching an unprecedented effort to scale up its test offering and the journey was 1% finished. Many things have been happening since then and this week is a great opportunity to look at the project again.

In 2014, the project moved to become a consensus-driven open-source project, using the web-platform-tests (aka WPT) as its central repository on GitHub. James Graham spent significant time on bringing the infrastructure together (see his GTAC 2014: Automation for a Better Web talk), as well as improving the level of reliability for the tests, with the help of Ms2ger. The wptrunner was introduced, originally designed to allow fully automated running of the tests in various Mozilla products.

In 2015, multiple improvements were added. Reftests were made more flexible to align with the CSS testing. A lint tool was introduced to facilitate the work of reviewers; The server got new features, such as storing cross-request state.

In 2016, to help improve the stability of the tests, a stability checker was brought in. It automatically runs new test 10 times on Firefox and Chrome to avoid problems when imported into the browser CI infrastructures. The Pointer Events Working Group adopted a test-driven approach, where changes to the specification are generally expected to have a corresponding pull request in WPT.

In 2017, the convergence of all browser engines around WPT increased. The Chromium project adopted WPT as their primary shared test suite. WebKit is actively looking at doing the same. The WHATWG started to use a WPT test-driven approach. The WebDriver specification reached Candidate Recommendation status. Geoffrey Sneddon migrated the CSS tests to WPT. Earlier this month, the Web Performance Working Group adopted the WPT test-driven approach as well.

This week, Bob Holt extended the stability checks to include Edge and Safari (see also Diving Into the Web Platform Tests). This brings the project closer to producing and storing test results.

As Tobie wrote 4 years ago, there’s plenty more we’d like to tackle in the future and the community is welcome to help. I’m looking forward to leverage the progress of the testing project for the various W3C specifications in development (over 200 nowadays!).

Updated Working Draft: CSS Box Alignment Level 3.

Source: W3C's Cascading Style Sheets home page15 May 2017

15 May 2017 Updated Working Draft: CSS Box Alignment Level 3.

Release Notes for Safari Technology Preview 29

Source: Surfin' Safari Jon Davis • 12 May 2017

Safari Technology Preview Release 29 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 215271-215859.




Web Inspector




Bug Fixes

What’s new in Chromium 58 and Opera 45

Source: Dev.OperaKarl Anders Øygard • 10 May 2017

Opera 45 (based on Chromium 58) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers.

IndexedDB 2.0

IndexedDB 2.0 is now supported in Opera, making it simpler to work with large data sets in the browser. IDB 2.0 features new schema management, bulk action methods, and more standardized handling of failures.

The structure of a site’s database has large performance impacts and can be difficult to change. To simplify updates, object stores and indexes can now be renamed in-place after a refactoring. Sites can also use more natural keys without worrying about a performance penalty thanks to binary keys, which allow compact representations for custom keys.

For more information about what IndexedDB 2.0 brings, check out Bevis Tseng’s summary.

An improvement to iframe navigation

Third-party content, such as advertising, that automatically redirects the page can annoy users and create security issues. Because of this, developers are able to put third-party content inside sandboxed iframes to prevent this behavior. However, in some cases this type of content needs to navigate the top-level page when clicked, like a standard advertisement.

To address this, Opera 45 now supports the new iframe sandbox keyword allow-top-navigation-by-user-activation. This keyword gives sandboxed iframes the ability to navigate the top-level page when triggered by user interaction, while still blocking auto-redirects.

Selection API changes

Other features in this release

Deprecated and removed features

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.

Updated Candidate Recommendation: CSS Grid Layout Level 1.

Source: W3C's Cascading Style Sheets home page09 May 2017

9 May 2017 Updated Candidate Recommendation: CSS Grid Layout Level 1.

Minutes Telecon 2017-05-03

Source: CSS WG BlogDael Jackson • 03 May 2017

Full Minutes

Respond 16: vw + vh === vnice – Craig Sharkie

Source: Web Directions Blog John • 01 May 2017

A pretty strong theme emerged at our Respond 16 conference of reassessing what parts of CSS might be usable now that they have browser support (or don’t) and then how they might best be used (or not).

Craig Sharkie gave a short, sharp presentation on the state of play with regard to viewport units. In fact, a couple of other speakers referred to viewport units at Respond 16 and at subsequent events as well, but Craig gave us a detailed rundown.

Here’s our Wrap magazine summary.

vw + vh === vnice

Craig Sharkie, author & raconteur

Craig Sharkie

Key points

As legacy browsers are replaced by more modern versions, viewport units provide a way to manage the proportional scaling of web typography.

Viewport units are length units representing viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

We know these units are “new” because we have had articles telling us about them just this year. And last year. And the year before … in fact, back to 2012. We have just under-utilised them.

vw equals 1/100th of the width of the viewport.

vh equals 1/100th of the height of the viewport.

vmin equals whichever of 1vw or 1vh is smaller.

vmax equals whichever of 1vw or 1vh is larger.

Browser support for viewport units is generally good but not all units are supported in all browsers. If you just
use vw and vh, support is 100%.


A digression: contextomy is the word for taking something out of context, and thereby changing its meaning. An example is saying “Great minds think alike” (when two people think of the same clever thing) but leaving off “And fools rarely differ” (which implies maybe it’s not because the two people were particularly clever). We do the same with browsers. We say “it doesn’t have full browser support” but we neglect to add that that doesn’t stop us from using techniques where there is support. Maybe this is why we fail to make use of the many measurement units we
have at our disposal.

Relative units can be used to smoothly increase font size, eg font-size: calc(1em + .25vw). This gives a smoothly scaling display ideal for responsive web design.

Viewport units can be used in the same way as em, rem and px to manage various page elements. Font resizing presents the strongest case for using viewport units, but experiment with cases such as having a child element react to viewport resizing while a parent element remains unaffected.

Viewport units can be used to ensure websites fit in the browser, eg making a square design element look right in a rectangular viewport.

Viewport units can be used create a thumbnail of a site by embedding the page as an iframe.


In theory, viewport units will eventually render nothing when the screen reaches zero width or height. In reality things just get too big or small to be useful.

Of the browsers in current common use, the IE group has the least support for viewport units. IE8 has no support at all, while IE9 supports “vm” rather than “vmin”. IE10, IE11 and Edge do not support “vmax”.

Opera Mini does not support viewport units at all, and neither does Android 4.3, but viewport resizing on mobile devices is not very common, anyway.

vnice is not actually a real viewport unit – chalk that one up to poetic licence.



The post Respond 16: vw + vh === vnice – Craig Sharkie appeared first on Web Directions.

Video Ristretto: Components Without Screen-based Media Queries – Chris Wright

Source: Web Directions Blog John • 25 April 2017

Chris WrightA hallmark of the relatively short history of web design and development has been the often very creative use of CSS elements meant to do one thing but made to serve some other purpose entirely.

Some might find that surprising, given that this has all been invented fairly recently for specifically to design and build websites, but the reality is that CSS was always going to need to evolve as we go along.

Back at Respond 16, Chris Wright addressed one of these situations, namely using media queries to adapt components to the available space – necessary for a responsive site. Chris’ talk focused on the prospect of using element queries instead: very interesting stuff and worth 25 minutes of your time.



Got your ticket for 2017 yet?

For Respond 17, we’ve put together a truly remarkable two-day program of international and local speakers digging into front end design and development, that we’re taking in full to Sydney (4-5 May) and Melbourne (8-9 May), with a special trip to Brisbane as well (11 May). Come and join us!


Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our once-a-week mailing list to keep up with everything happening at Web Directions. And you’ll get a complimentary digital copy of Scroll magazine.

The post Video Ristretto: Components Without Screen-based Media Queries – Chris Wright appeared first on Web Directions.

Video of the Week: Building Accessible Web Components Without Tears – Russ Weakley

Source: Web Directions Blog John • 20 April 2017

Russ WeakleyOne of the things we really like about staging conferences like Respond is that we can bring to Australia experts from around the world.

Perhaps even better than that is when we can feature locals who are themselves world class in their fields. When it comes to CSS, we’re fortunate to have a thinker, practitioner and educator at that level in Russ Weakley.

Add to that Russ’s understanding and ability to use CSS to build truly accessible web experiences, and his capacity and willingness to share his skill with as many web practitioners as possible, and we’re talking not just world class, but world leading.

And it doesn’t hurt that he can be seriously funny. Here’s a tadge under an hour of Russ at Respond 16. Well worth your time.


Got your ticket for 2017 yet?

For Respond 17, we’ve put together a truly remarkable two-day program of international and local speakers digging into front end design and development, that we’re taking in full to Sydney (4-5 May) and Melbourne (8-9 May), with a special trip to Brisbane as well (11 May). Come and join us!


Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our once-a-week mailing list to keep up with everything happening at Web Directions. And you’ll get a complimentary digital copy of Scroll magazine.

The post Video of the Week: Building Accessible Web Components Without Tears – Russ Weakley appeared first on Web Directions.


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.


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