April 22nd
- 11:00am–3:00pm Sydney
- 10:00am–2:00pm London
- 1:00pm–5:00pm New York
New in ‘22 — the CSS browsers will ship this year
Jen Simmons, Evangelist, Web Developer Experiences, Safari & Webkit Apple
Whether you’ve been writing CSS for a year, or for two decades, it seems we always need more from what browsers provide. A lot of great solutions to long-standing problems are landing in 2022.
Come hear about many of the most requested additions to CSS — including parent selectors, better viewport units, tools for dealing with !important battles, subgrid, wide gamut color, color font palettes and the #1 most requested, Container Queries
Cascade Layers
Bramus Van Damme, Front End Developer
When writing CSS, we have to carefully think about how we write and structure our code. Without any proper “plan of attack” the Cascade can suddenly work against us, and we might end up with pieces of code overwriting each other, selectors getting heavier and heavier, a few !important modifiers here and there, … — Uhoh!
To regain control over the Cascade in those situations there’s a new CSS language feature to help us: Cascade Layers (CSS @layer).
Let’s take a look at what these Layers are, how we can use them, where they fit in, and what benefits they bring.
:where :is :has?
Kilian Valkhof, Founder Polypane
When people say CSS is hard, they often mean that writing good CSS selectors is hard. As a developer, you need to make a lot of trade-offs: a more precise selector also comes with increased specificity, making it hard to overwrite style elsewhere. Targeting two sets of elements often means duplicating the selector and after twentyfive years of CSS, you still can't style based on child elements.
...except CSS now has solutions for all these problems, and more. In this talk we'll explore the impact the new :is, :where and :has pseudo-classes will have on the way you write CSS, how to use some of these features ahead of browser support and the amazing CSS they enable.
Focus Visible, At Last!
Josh Goldberg, Open Source Developer
:focus-visible is the CSS selector of your accessible focus management dreams! It targets elements that receive focus only when the user appears to be using an input modality that would benefit from a visual. This talk will cover the history of bad :focus behavior, how :focus-visible fixes things, and general tips for focus visualizations and management in your CSS and HTML.
Refreshment break
,
Need a quick breather? Or why not share your thoughts with others attending? We'll be back soon.
Type-setting in CSS: Using typography to enhance your design
Martine Dowden, CTO, UX / UI Designer & Developer
From hands, to chisels, quills, the printing press, and now the web, a written record of our existence has been a constant throughout history. Languages, and how they are depicted, have evolved alongside the tools we use to render them. Often overlooked in design, text content is an integral part of the visual aspect of an application and CSS allows us to control and manipulate its look and feel.
In this talk we will cover a little bit about the history of typography leading up to where we are today, how to make decisions about fonts and their usage in our application, and the CSS properties that allow us to manipulate our type for a polished beautiful design.
The colorful future of CSS
Alvaro Montoro, UI Manager Visa
CSS has evolved considerably over the years, and some of the most exciting recent changes are coming from the color specification. Long gone are the days of just using RGB or HSL. Instead, there are new color formats, a new notation, new functions, and so much more.
We'll dive into the most recent CSS Color Module Level: review what's coming, show examples of the latest function definitions and explore the relative colors and how they can revolutionize white-labeling.
How Does CSS Work? and How We Can Change How It Works!
Elad Shechter, CSS/HTML Architect Appwrite
When you start creating a new website or web application, even before writing a single style, the browser applies styles to it — its default styles. Have you ever asked yourself who decides what those basic default styles will be?
In this talk, I want to teach you the different CSS levels in browsers, how they work, and how we can control and manipulate them.
April 29th
- 11:00am–3:00pm Sydney
- 10:00am–2:00pm London
- 1:00pm–5:00pm New York
Are CSS Pre-Processors Becoming Obsolete?
Facundo Corradini, Front-end developer Scalable Path
CSS pre-processors have been one of the most useful tools in our web development toolbox for decades. But with the advent of CSS "variables", native nesting, and other great new specs, many of their use-cases seem to have been taken over by the language itself.
In this talk we will dive into the similarities and differences between the features introduced by CSS pre-processors and those of the newer CSS specs, when to use each, and how they can get along
Effective CSS refactoring
Adrian Bece, Full stack developer
CSS refactoring is not an easy task. It requires a detailed analysis and audit to discover weaknesses and issues in the codebase. Choosing an effective refactoring strategy is also a challenge - The scope of changes can range widely per task, and the substantial changes can introduce bugs and regressions in the legacy codebase. In this talk, we’ll cover these topics and more - we’ll learn what makes the CSS codebase unhealthy and how we can combat regressions and catch them early in the development process.
Modern CSS rendering performance: The internals of web pages optimization
Michael Hladky, Human push-based.io
In this talk, we demystify the browser’s rendering pipeline and explore the different ways you can enhance the user experience by improving your CSS rendering performance. We will get to the core of browser rendering optimization, uncover what’s hidden under the hood there, and identify the opportunities for improvement that one can seize with a few lines of CSS only and RenderingNG architecture on hand. During this session, we will take a look at how the web page is rendered in a browser, go over the basic Chrome DevTools’ workflow for analyzing runtime performance and see how to benefit from these metrics by introducing only small changes in the CSS. All of the covered implementations will be demoed for you to see their real-world application.
Break time
,
Time for a quick break for a cup of coffee or tea. Chat to fellow attendees and speakers. Or visit one of our fantastic partners.
Real-world CSS custom props
Ben Buchanan, Engineering Lead Quantium
A few years ago we decided CSS custom properties were the future for our UI library, and we've been reducing the focus on SCSS ever since.
Custom props have added a useful new facet to our design system's API; and given us the power of runtime variables across a platform-agnostic environment.
But CSS Custom Properties changed our CSS more fundamentally than we expected. We needed to break free of old habits to allow their strength to come to the fore.
Ditch the Media Queries: Modern CSS Replacements for Better Responsive Code
Kathryn Grayson Nanz, Developer Advocate Progress
Thankfully, CSS has come a long way since the days when device-based breakpoints were the norm, but a lot of us got used to just throwing in a media query (or twelve) to make things responsive, and never quite broke the habit. Now that we have modern CSS features like grid, flexbox, calc, clamp, aspect-ratio, and more – in 2022, it’s finally time to ditch the media queries in your responsive code. Today, we’re going to start at the top and work our way down: from the big-picture display formatting all the way to the smallest CSS units. And as for your old stylesheets, don’t worry too much…we can refactor. We have the technology
Responsive patterns with subgrid
Rachel Andrew, Technical Writer Google
We were all pretty excited when CSS grid layout subgrid landed in Firefox, but in the long wait for it to make it to Chrome, it's a value that has had little attention in the past year. However, it is on the way, and in this talk, I'll show you some interesting patterns that it enables, so you'll be ready to take advantage of these new layout possibilities.
Practical Uses For Container Queries
Stephanie Eckles, Software Engineer Microsoft
Container queries are on the horizon, and a polyfill means they are available now as a progressive enhancement. See how you can improve your responsive layouts by learning how container queries work through exploring practical use cases.
Our venue
hover 2021 will take place across 2 Fridays in April wherever it's most convenient for you.
Getting there:
Get out of bed, make a coffee, wander to your desk, and start right in. Or just watch from the comfort of your bed. If conditions allow watch in your office, or grab a team pass and watch together as a team.
No expensive flights, or long commutes, be part of it wherever you feel like.
Accommodation:
No need for hotel rooms or airbnbs!
Partners
We work closely with our partners and their technologies to deliver world leading online conferences.
Contact us for more on how we work can work with you to help you be even more awesome.
Praise for past Web Directions events
Web Directions is the must-attend event of the year for anyone serious about web development.
Phil Whitehouse,
Innovation Lead DigitasLBi
I’ve been admiring the Web Directions events for years, and was honored to be part… What a fantastic event!
Ethan Marcotte,
inventor "responsive Web design"
Out of any conference, Web Directions is far and away our favourite
Dave Greiner,
founder Campaign Monitor
About Us
Co-founded and now run by John Allsopp, Web Directions has for nearly 20 years brought together leading developers, engineers, visual, IxD, UX and product designers, Art and Creative Directors, product managers indeed everyone involved in producing web and digital products to learn from one another, and the World's leading experts across this vast field.
We spend our lives thinking about what comes next, keeping up with trends in technology, practices and processes, and filtering the hype, to make sure you don't miss trends that matter, and don't waste time on hype that doesn't.
We promise attending one of our events will leave you significantly better versed in the challenges you face day to day, and in solutions for addressing them.
John Allsopp
John Allsopp has been working on the Web for nearly 30 years. He's been responsible for innovative developer tools such as Style Master, X-Ray and many more. He's spoken at numerous conferences around the World and delivered dozens of workshops in that time as well.
His writing includes two books, including Developing With Web Standards and countless articles and tutorials in print and online publications.
His "A Dao of Web Design" published in 2000 is cited by Ethan Marcotte as a key influence in the development of Responsive Web Design, who's acclaimed article in 2010 begins by quoting John in detail, and by Jeremy Keith as "a manifesto for anyone working on the Web".
Code of Conduct
For over a decade, we've worked hard to create inclusive, fun, inspring and safe events for the Web Industry.
As part of our commitment to these values, we've adopted a code of conduct for all involved: ourselves, our speakers, our partners and our audience.
If you have any concern or feedback, please don't hesitate to contact us.