The Future of Style aggregates posts from various blogs that
talk about the development ofCascading 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.
Anyone with interest was asked to respond to the request
for review from the TTML working group.
fantasai will reply to Chris shortly in order to resolve if
Writing
Modes needs one more CR cycle.
gregwhitworth began reviewing all the Flexbox tests to
establish coverage.
The group discussed how to continue moving CSS2 publications
forward:
Though the group recorded several resolutions in February to
change the CSS2 publication process (recorded here)
the new process still hadn’t been fully implemented. This has lead
to there being greater confusion as to what is the most up to date
and possibly new work occurring in more than one place.
There was some concern that this new process was either not the
best way forward or not well understood, so there will be a
conversation at the Paris F2F to revisit the original
decision.
In order to reduce confusion as to what is currently out there,
Bert will look through css-testing and make sure that any changes
there are merged into css22 before deleting css-testing as well as
css-source (which is currently empty).
There were three items
listed in github for the group to choose from to resolve the
compatible alignments not always being compatible issue.
Exclude items with align-self: stretch and a
specified height constraint (min-height/height/max-height) from
align-content: last baseline alignment.
Exclude items with align-self: stretch whose
specified height constraint gets triggered such that it no longer
sizes as stretch.
Treat items with align-self: stretch and
align-content: last baseline as having an end fallback
alignment instead of a start fallback alignment.
Safari Technology Preview Release 35 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
218629-219131.
Performance
Fixed a 50% regression on MotionMark Suites when extended color
support was added (r218717)
Fixed the bug that Speedometer’s score worsens by 40% when
accessibility features are enabled (r218910)
Media
Changed image decoding so that when an image appears more than
once on a page, decoding to paint one instance repaints them all
(r219045)
Fixed a frame rate issue that caused getUserMedia
to fail on some machines (r218852)
Fixed allowing media element to update its state when Mission
Control closes the fullscreen window (r218813)
Made a change to hide volume controls when AirPlay is active
(r218891)
Prevented capturing at unconventional resolutions when using
the software encoder (r218699)
Prevented clearing capture mute from clearing audio mute
(r218632)
Web Inspector
Added a small delay before showing the progress spinner when
loading resources (r219017)
Added a toggle button to the left side of the split console
navigation bar (r218839)
Fixed initial search sometimes being performed twice, producing
duplicate results (r219021)
Fixed slowness when pausing with a deep call stack by avoiding
eagerly generating object previews (r218718)
Flipped all go-to-arrow instances in right-to-left mode
(r218777)
Fixed script timeline bubbles that sometimes appear to miss
large events (r218781)
Fixed a hang when using “break on all exceptions” throws a
stack overflow (r218652)
Improved type token background color in the debugger (r219041)
JavaScript
Cleaned up Object.entries implementation (r218790)
Conversation around alias “nowrap” as “no-wrap” started with
the three options the topic had previously narrowed down to:
No change at all
Add dashed version as a parse-time alias
Add dashed version as a new values that behaves the same as
nowrap
The group was divided on if the change was a good idea so
conversation mostly focused on option 1 vs either 2 or 3. There was
very little interest to implement the change quickly or at all from
vendors so it was decided to close this for now and let the
advocates see if they can convince anyone else of the need.
Resolved: No change for issue about adding no-wrap
The group did some on the call test cases that showed there
wasn’t currently any interop on computed value of a negative calc
unit. birtles brought up some concerns around Animations that
needed further consideration before a decision is reached.
Discussion will continue on github.
Resolved: trim white space before / after property value
in a declaration.
Resolved: New Values boilerplate
language accepted.
There was no one strongly championing the gradients with a
single color stop proposal, so
it will stay out of the spec until it finds an advocate.
We’re going back to Respond 16 for our Video
of the Week this week, when Sara Soueidan came to visit and
delivered an inspiring, eye-opening keynote presentation on what
can be done with CSS and SVG working together.
It’s an excellent talk, and really needs no more introduction
than that.
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.
Rossen will confirm if Writing Modes
needs a CR publication before the PR request.
Variables
needs to republished after the tests are approved.
Resolved: make “disc” not overridable.
Resolved: adopt inset as the new positioning property
name that’s used for shorthand
fremy will create a poll with a description and diagrams to
evaluate if inset is preferable over some of the other top
options.
Resolved: leave behavior as-is and not accept ‘legacy’
values for ‘place-items’.
Resolved: accept the proposal that margin and position
properties will return the specified values.
Resolved: the baseline alignment in block direction of
tables is not defined. Also add a note prompting implementors to
bring back ideas if they have any.
Resolved: leave the ‘left’ and ‘right’ values to
fallback to start.
Resolved: remove left and right from align-self and
align-content in align L3.
birtles gave a brief introduction to issue 1301
(reconsider name of frames() timing function) in hopes
of getting more discussion before next week’s call.
Safari Technology Preview Release 34 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
217978-218629.
WebRTC
Added WebRTC options to the Developer menu
Disabled Legacy WebRTC API in the Experimental Features menu by
default (r218169)
Changed behavior to close NetworkProcess WebRTC sockets as soon
as the Web Process no longer needs them (r218432)
Added support for receive-only SDP offers through
addTransceiver (r218431)
Changed handling capture status based on MediaStreamTrack
(r218399)
Changed RTCPeerConnection to return RTCSessionDescriptionInit
instead of RTCSessionDescription (r218335)
Fixed a cloned MediaStreamTrack to not mute the other tracks
using the same source (r218497)
Fixed RTCPeerConnection getReceivers() to return
transceivers that have an active receiver but no active sender
(r218182)
Fixed the screen going into sleep mode during WebRTC video
(r218151)
Media
Fixed high CPU usage when entering fullscreen or seeking during
MSE video playback (r218463)
Fixed seeking during MSE video playback where audio would begin
playing long before rendering the video (r218150)
Fixed video flashing black when switching back to a tab
(r218291)
Improved media controls rendering for long-loading media files
(r218600)
Prevented media elements continuing to load media data after
navigation (r218016)
JavaScript
Made Object.assign faster by rewriting it in C++
(r218348)
Resolved: Columns are properties applied to block
containers only.
Those arguing in favor of the proposed alias of “nowrap” as
“no-wrap” did so for author usability. However, the argument
against the alias is that it adds weight to the API and sets a
precedent for doing this again in the future. The two sides
couldn’t agree within the time of the call so the topic was
deferred back to github.
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.
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.
Developers can now use MediaError’s message property to
obtain greater detail about a MediaError produced by
<audio> or <video>.
WritableStreams
are now available as part of the Streams API for processing
streams of data, while providing a standard abstraction for writing
streaming data to a sink with built-in backpressure
and queuing.
The Image
Capture API now allows sites to take higher resolution images
than before, providing full control over camera settings such as
zoom, ISO, and white balance.
To provide enhanced privacy, CSS stylesheets can now specify
their own referrer
policy via the HTTP header, rather than always inheriting the
referrer policy of the document that originally referenced it.
Touch
events are now aligned to requestAnimationFrame, ensuring that input is
processed as part of the document lifecycle and creating a more
efficient and adaptive input response.
The <dialog> element has changed from
display: inline to block by default to better align with the
spec.
Following
removal from the Media Queries spec,
support for hover: on-demand and any-hover:
on-demand media queries have been removed.
To better align with spec and help avoid race conditions,
decodeAudioData now detaches the given ArrayBuffer
before decoding, removing all content from the object and making it
unable to be reused or examined.
The -internal-media-controls-cast-button CSS
selector has been removed in favor of the Remote Playback
API.
The -internal-media-controls-text-track-list* CSS
selectors have been removed in favor of custom-built video
controls.
The SVGTests.requiredFeatures attribute has been
removed following its removal from the
spec.
initDeviceMotionEvent() and
initDeviceOrientationEvent() were removed in favor of
DeviceOrientationEvent()
and DeviceMotionEvent(), following a spec trend of
moving away from initialization functions and toward
constructors.
To preserve consistency across browsers, the
sample property will now be included in a
violation report (and associated SecurityPolicyViolationEvent
object) if a report-sample expression is present in
the violated directive.
To increase security, Opera will now block requests for
subresources that contain embedded credentials, and instead handle
them as network errors.
To increase security, Opera will now block requests from
HTTP/HTTPS documents to ftp: URLs.
To preserve consistency across browsers, injecting JavaScript
via AppleScript is longer supported in Opera for Mac.
The ability to call
Notification.requestPermission() from non-main frames
has been deprecated to align the requirements for notification
permission with requirements for push notifications, and ease
friction for developers.
Support for Shared Dictionary Compression (SDCH) has been
disabled until a stable API has been standardized.
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.
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.
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
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
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
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
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
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
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.
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.
Håkon Wium Lie will talk about ‘CSS in print’ and Bert Bos
a…
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.
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.
Performance
Fixed an issue that could lead to large memory use in the
Safari Technology Preview and web content processes when certain
Safari Extensions are installed
JavaScript
Fixed for-in optimization static analysis in the
bytecode generator (r217438)
Improved performance of String.prototype.concat
(r217648)
Improved the bytecode and type information provided for
toLength (r217530)
Please send feedback by either filing an issue in
GitHub (preferable) or sending mail to the (archived)
public mailing list
www-style@w3.org 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.)
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.
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?
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.
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.
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.
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
Miller: Prolific 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
Cho: Zero 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.
Resolved: Blocks are turned into inline-blocks. (In
reference to issue #1341:
Does inlinification really need recursion?)
Resolved: We are provisionally going with option b
(inline-block -> block; inline flow-root -> flow-root). (In
reference to issue #1246:
Blockification doesn’t seem backwards-compatible for
inline-blocks)
TabAtkins will open a new issue to decide if you maintain
separate computed values for just this one case or the whole
possible space of values. Depending on that discussion the previous
resolution may need to be revisited.
Resolved: Define this (propagation of text-decoration
with display:contents) as a box-tree concept.
Resolved: Let’s try it out, go forward with the
diff. (In reference to issue #1118:
Should anonymous boxes always inherit through the box tree?)
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.
Rewind, July 2008: Native Apps, the great leap backwards?
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.
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
www-style@w3.org 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.)
Those who had done a review generally thought the proposal for
the interaction of the ‘inherit’ keyword and ::first-line (comment
here) sounded sane, but conversation will continue on github to
handle specifics and get more opinions.
Resolved: Close issue
(any-hover can’t be used to detect mixed hover and non-hover
capable pointers) no change.
Resolved: Mark the various hover and pointer things as
at-risk.
Resolved: Push scripting media query values to L5.
As 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.
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 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.
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.
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.
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.
30 June
End of Financial Year; Code and Code Leaders Early Bird
ends.
2 August
Code Leaders Conference.
3-4 August
Code Conference.
Pricing
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.
* Classic Code ticket (conference only) for just
$999 (save $200)
* Silver Code ticket (conference plus videos) for just
$1,099 (save $200)
* Gold Code ticket (conference, videos and speaker dinner) for
just $1,199 (save $200)
* Code Leaders ticket for just $699(save $300
– not a typo)
* Or get both a Code Silver ticket and a Code Leaders ticket
for just $1,499 (saving $800!)
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.
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.
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.
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!).
Improved Date.parse to accept wider range of date
strings (r215359)
Implemented Object.isFrozen() and
Object.isSealed() according to ECMA specifications
(r215272)
CSS
Added support for percentage gaps for CSS Grid (r215463)
Changed :focus-within behavior to match
specifications (r215719)
Rendering
Avoided repaints for invisible animations on tumblr.com
(r215507)
Fixed rendering flexbox children across columns (r215320)
Fixed text-align:start and
text-align:end behavior in table cells (r215375)
Fixed animations with large negative
animation-delays that fail depending on machine uptime
(r215352)
Reduced redundant text measuring during mid-word breaking
(r215666)
Changed memory handling to keep all of the decoded frames for
an animated image if the total memory size of the frames is under
30MB (up from 5MB) (r215557)
Fixed <li> content inside
<ul> to wrap mid-word when
word-break:break-word is set (r215660)
Fixed the location of the “recent searches” popover of
<input type="search"> in RTL mode (r215830)
Web Inspector
Added regular expression support to XHR breakpoints (r215584)
Added a pause reason for “All Requests” XHR breakpoint
(r215427)
Fixed the enabled state of “All Requests” XHR breakpoint to be
correctly restored (r215435)
Fixed a bug where XHR breakpoints would disappear when the
inspected page is reloaded (r215473)
Fixed XHR breakpoints restored from settings but not appearing
in the sidebar (r215422)
Fixed Network datagrid columns to correctly restore their shown
or hidden state (r215449)
Added tooltips to Network grid items for easier reading when
text overflows (r215631)
Fixed sorting by Priority column in Network datagrids (r215793)
Fixed the display of Web Socket messages with non-latin letters
(r215388)
Prevented showing the Search tab for location links, prefer the
Resources tab (r215630)
Changed to treat Uint8ClampedArray as an array, not an object
(r215855)
Fixed Command-G (⌘G) shortcut to allow Find next to work in the
console (r215795)
Implemented autocompletion for CSS variables (r215358)
Updated the icon for the Ignore resource cache button in the
Network Tab (r215440)
Fixed an issue where the status bar would not display modifier
key information (e.g. “Open * in new tab” when holding the Command
key) (r215790)
Improved performance of typing on pages with many
<input> elements
Fixed an issue where a hardware “enter” key would not dismiss
JavaScript alert, confirm, or
prompt; previously, only the “return” key would
dismiss a dialog
Fixed QuotaExceededError when saving to localStorage in private
browsing mode or WebDriver sessions (r215315)
Fixed an issue where the Content-Disposition header filename
was ignored when the download attribute is specified (r215736)
Fixed escaping ‘<‘ and ‘>’ in attribute values when using
XMLSerializer.serializeToString() API (r215648)
Fixed issues causing beforeunload dialog to be
shown even though the user did not interact with the page (r215404)
Changed all CORS requests and cross origin access from
file:// to be blocked unless Disable Local File
Restrictions is selected from the Develop menu
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
Using removeRange(), a new function, developers can now
programmatically remove a specified text Range.
When accessing properties like selectionDirection,
selectionStart, and selectionEnd, Opera
will now return null when it would have thrown an
InvalidStateError DOMException.
Rather than silently clamping offset values that were too
large, setBaseAndExtent() now throws an
IndexSizeError DOMException to better align with
spec.
Rather than silently failing for DocumentType node
inputs, setBaseAndExtent(), extend(), and
collapse() now throw InvalidNodeTypeError
DOMException to better align with spec.
To improve interoperability, Selection.addRange()
now ignores an additional range if it overlaps with an existing
range, rather than merging the two ranges.
To better align with spec, getRangeAt() now always
returns a new Range with position normalization.
Other features in this
release
Opera adds in-form warnings for sensitive fields when the
top-level page is not HTTPS. Whenever you start filling in your
password or credit card number on a page, which is not HTTPS, the
warning will appear.
PointerEvents.getCoalescedEvents()
allows developers to access all input events since the last time a
PointerEvent was delivered, making it easier for
drawing apps to create smoother curves using a precise history of
points.
Developers can now customize Opera’s native media controls such
as the download, fullscreen and
remoteplayback buttons using the new ControlsList
API.
Sites can now
access the approximate range of colors supported by Opera and
output devices using the color-gamut Media Query.
To simplify developer experience, trailing commas are now
allowed
in JavaScript for formal parameter and argument lists.
The WebAudio API’s new playback AudioContextLatencyCategory
enables the developer to easily make conscious tradeoffs between
latency, power, and CPU efficiency.
Deprecated and removed
features
Apple-interchange-newline,
Apple-converted-space,
Apple-paste-as-quotation,
Apple-style-span, and Apple-tab-span have
been deprecated as they are non-standard CSS classes.
usemap attributes now use case-sensitive matching
rather than
compatibility caseless to better align with spec.
Sites must now use HTTPS when requesting notification
permissions or creating non-persistent local notifications with the
Notifications API, in accordance with Chromium’s
policy around powerful features.
Encrypted Media Extensions transmitted over non-secure origins
has been deprecated per Chromium’s
policy around powerful features and in compliance with the
spec.
To better align with spec, cancelBubble
is now considered an alias to stopPropagation() when
set to true, and does not do anything when set to false.
The VTTRegion
interface functions, addRegion() and
removeRegion(), have been removed from the WebVTT spec
and are therefore being removed from Opera.
Top-level navigations to data: URLs have been
deprecated to further protect users from spoofing and phishing
attempts.
An instance of HTMLEmbedElement or
HTMLObjectElement can no longer be called as a
function, since the legacy caller has been removed.
Pre-standard ChaCha20-Poly1305 ciphers have been removed
following the standardization of these algorithms at the IETF as
RFC 7539 and
RFC 7905, and the
subsequent shipping of the standard versions in Opera 28.
The AudioBuffer
constructor now accepts the sampleRate member of an
AudioBufferOptions dictionary instead of a
context argument, simplifying the interface and
emphasizing that AudioBuffers can be shared between
AudioContexts.
The synchronous
FileReaderSync API has been deprecated in service
workers, as the service worker spec requires all types of
synchronous requests to be initiated outside of a service
worker.
The abbr
and
acronym elements now have a dotted underline by default to
align with the HTML standard.
The motion-path, motion-offset, and
motion-rotation CSS properties have been removed in
favor of the new versions: offset-path,
offset-distance, offset-rotate.
The AudioSourceNode interface has been removed as
it was not part of the WebAudio spec.
The webkitdropzone attribute has been removed as
it was not widely adopted.
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.
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.
We’re going back to Respond 16 for our Video
of the Week this week, when Sara Soueidan came to visit and
delivered an inspiring, eye-opening keynote presentation on what
can be done with CSS and SVG working together.
As we look forward to Web Directions Code 17 in
Melbourne this August, our Video Ristretto this week harks back to
