#btconf Berlin, Germany 07 - 08 Nov 2024

Miriam Suzanne

Miriam is an author, artist, developer, and open web advocate. She’s an Invited Expert with the W3C CSS Working Group, and member of the Sass core team, and a co-founder of OddBird – providing a range of web development and design services, along with in-depth web development workshops and trainings. Offline, Miriam spends her time repairing clocks, knitting socks, or creating hybrid performances with Teacup Gorilla & Grapefruit Lab.

Prefer to watch this video on YouTube directly? This way, please.

Hints and Suggestions: The Design of Web Design

The web is fundamentally different from other platforms, built around a radical political vision for resilience, adaptability, and user control. With that vision under threat, the Cascade takes on an almost absurd task – styling unknown content, with unknown collaborators, on an infinite and unknowable canvas, across browsers, languages, writing modes, and device interfaces.

This is a dive into the origins of the web, and CSS in particular – the design constraints, the range of strange proposals, and how we got where we are. By the end, we have a better understanding of the cascade, and see the ‘CSS is Awesome’ meme in a new light.

Transcription

(Music Playing)

Hi. Thank you.

He’s gone.

Hi, welcome. Day two. I hope you all got some sleep. How are you enjoying it so far?

Great.

Wonderful.

Yeah, what are we going to talk about?

Fuck it. Let’s do this.

We’re here to talk about CHSS, Cascading HTML Style Sheets, first proposed by Håkon Lie 30 years ago, October.

This email is still online. You can go read it. It wasn’t the only proposal for Styles on the web, and it wasn’t the first proposal for Styles on the web, but it solved an important problem for this new platform.

Not a technical problem. Styles aren’t that hard, but a philosophical problem. Political, like everything that we do, building interfaces for humans.

So the first web browser, the www hypermedia browser and editor, was built for the next machine at CERN. But you can’t make a web that’s worldwide by saying it works on my machine, and everyone else is an edge case. So they hired Nicola Pello to develop the second browser. And you can see it’s clearly less powerful. It has no graphics at all. There’s these little numbers that are generated for the links. So you can hit the number and go to the link. You don’t even need to download and install the software. Any machine with an internet connection can telnet into the CERN servers and start browsing the web using text only. Any monitor can do this, no problems. This becomes the mission statement of the W3C, web for all, web on everything. And everything is a lot of things. That’s a lot.

And it’s not just all these mobile devices, but things without any screen at all. And then also screen readers, which have a screen, and then read it, which is sort of a different thing. And that’s kind of weird. And then maybe playgrounds. Who knows?

Web everywhere.

And if we really want this to happen, if we want this to be possible, web for all, web on everything, that leads to some really interesting constraints. And they’re documented on the first website. You can go to the first website still, the CERN HTML,

www project website. You can read all about it. And they document this problem. Oh, that’s interesting. Let’s see if we can get code pen. There we go.

All right. So we’ve got this problem.

Lovely.

All right.

Browsers should ignore tags that they do not understand. And it should ignore attributes that they don’t understand on tags that they do understand. And you can’t see the HTML here, but a bunch of it’s fake. We can just put fake HTML in there, and the browser does fine. Just ignores it. Just rolls on past it. No problem.

And that’s part of the design of making this work. It’s why we can still see the first website on modern browsers and why we can load modern websites on the first browser. There’s an emulator provided by Remy Sharp. You can go. This is the Beyond Tellerrand website loaded on the first browser. There’s my speaker page. You can go play around with this. And it’s all there. I mean, not the images, not the styles. This was before CSS.

But the idea is that browsers are going to protect the content. The code is optional. The content is essential. That has to be there. Everything else can disappear, and we’re going to be okay. But this is an even bigger problem for design specifically. For HTML to be a common language across all platforms, that implies no device-specific markup or anything which requires control over fonts or colors.

It says that on the first... Like Tim wrote that.

Web design is just never going to happen. So, thank you. Any questions?

But the problem isn’t what, but how.

The early browsers all had styles. That’s not an issue. That’s easy to solve.

Even the text-only browser, we can see it’s got space between paragraphs. There’s this sort of, like, I don’t know, grid-ish, table-ish layout here or something. There’s the generated content for the links. There’s all caps heading. We’ve got styling happening on this monitor without any graphic interface.

And PostScript had been out for almost a decade. That’s the language behind PDFs. So, we know how to write code that does design. That’s a solved problem at this point. It’s not hard to design in code. But like print design, what we design, we have total control over it. We can choose the colors. We can choose the fonts. We can choose the page size, and then it stays that way forever. Can you imagine?

You just choose it and it stays. And then you can tell the printer what ink you want. You can tell them what paper to print it on. And you get it back from the printer, and it’s exactly what you designed. And you can click on it all you want and nothing happens.

It just sits there.

The fact that we have control over the paper page is a limitation of that medium.

How many of you have read the Dow of Web Design from John Alsop? Okay, a couple. Go read it. It’s good.

Web styles don’t work that way. They have to be contextual. The web is just fundamentally a different sort of platform.

Styles have to adapt to context, to different situations. It’s responsive and not just to the width of the viewport, but also to user preferences and device interfaces and changing capabilities over time and then new content coming at a rapid pace. We don’t even know what’s going to be there. And the point is that we’re not alone here. We’re not the only ones involved. We’re not doing it by ourselves. And we don’t get final say. We’re collaborating with the browsers, all sorts of different browsers. We don’t have a single platform.

We’re collaborating with our users who have really cute tool belts.

I just love that. And they bring their own devices, and their devices have different capabilities. And then probably aliens. I don’t know. We should collaborate with them. They’re just trying to get home.

Yeah.

So we’re trying to do graphic design of unknown content with unknown collaborators on an infinite and unknowable canvas across writing modes, operating systems, interfaces, languages. This is absurd. What are we doing?

How are we going to do this? Sorry, I just really wanted to use this chair.

Yeah. So in this context, web design seems impossible.

But nobody was happy with this situation, right?

HTML totally eliminates all visual creativity. Nobody wants that. Users don’t want that. We don’t want the web to look boring when we’re surfing it. Surfing doesn’t sound boring.

And as authors, we don’t want to put something boring out there. We want to be creative and express our design aesthetics. So there’s a turning point around 1993 when Mosaic comes out with the image tag. And this is before web standards. They don’t have to ask permission. They just ship the image tag, and then everybody’s like, “Oh, shit. We can do web design now. We just have to take everything and shove it into an image.”

And now we have web design. It’s perfect. I mean, if it doesn’t load, it’s just all gone. There’s no way for the browser to protect this content. We lose everything that made HTML special. So this is seen as a huge threat to the web.

It could have become a giant fax machine where we send pictures back and forth. And that’s not what we’re trying to do here.

So there’s sort of this rush of proposals, and they’re all documented. You can go to the--I don’t remember exactly the URL. It’s in my slides.

But you can go to this historical style sheet proposals and read all of them, taking HTML to the max with designs. The first browser to support style sheets was Pei Wei’s viola browser.

And this was the syntax that he had.

You can see it’s already got selectors and properties and values. We’ve got sort of declarations. We’ve already got a nested syntax. So that was forward thinking.

And there’s already inheritance here because it would be absurd not to do inheritance. I don’t know. You go through and, like, the paragraph should be read. Also, everything in the paragraph should be read. Also, everything inside of everything inside of the paragraph, also read. Also, everything inside of those things. Can that be read, too? Be a problem. So we’ve got inheritance, all sorts of things. A little bit before that, Robert Reich proposed this easily parsable format.

(Laughter)

So I’m sure you can all tell me what that means.

I imagine he means easily parsable by the browser.

Which might be true. He’s got a default here. This is, I guess, sort of like the star selector. We’ll just style everything at once. This is the font family is times.

God, I don’t remember. The spacing is proportional, I think. Yeah, size 14. He’s very clear that size 14 isn’t 14 pixels or 14 points. It’s just 14. And then the browser can figure out what that should mean.

And then we equals me, which, I don’t know, it’s some sort of Beatles thing, I think. John Lennon was really into web typography. Times is not meant to be a font name per se. Rather, it’s a suggestion of a particular style of character representation. We want something times-like. We’re not actually saying it has to be times.

These styles are suggestions or hints, not rules. And he’s very clear about this and he says it over and over. This language keeps coming back. Sometimes all caps. Hints or suggestions that might be used. They might not be used. Other people pick this up. John Bosaq’s proposal has hints that will be degraded in a controlled way. Or we can allow authors to attach style hints. This is from Hokum’s cascading HTML style sheets.

Allow authors to attach style hints. Hints that the browser may or may not use.

Authors and publishers should have some stylistic influence, but without resorting to page description languages. We don’t want to do PDFs. We don’t want to send PDFs back and forth. We can’t describe the page. We don’t know the page. We don’t know anything about it. The page could be anything. So how do we avoid describing the details of the page? And so we get a language that works in the same way, the CSS works the same way that HTML does. We can put all sorts of fake CSS in there. It’s just made up shit. Just emotions tearful. I wish we had that one. That would be a good one.

But the browser recovers. It just ignores the stuff that it doesn’t understand and that helps us be compatible forwards, backwards, and sideways.

Content should always be viewable and accessible by default. That is another... Yes!

(Applause)

That becomes another design principle of the web as a platform. And that’s why we get the default overflow is visible. Like, it’s a simple choice. We’re protecting the content at all costs. I mean, we could just quickly fix that.

Good.

All right. Done. I don’t know what we wanted. Like, this is what InDesign does. You just totally lose the word that gets cut off. Is that better? Is that what we wanted? Like, we have to make some choice here. We have to do something with overflow. Protecting the content makes sense as a thing that we might do with overflow.

Why do I have this slide here?

I don’t know. Print is unchanging.

(Laughter) It’s unaware of context, unable to adapt. We’re giving up design control when we work on the web.

But we have to, in order to allow the web to carry our designs further than we could have on our own because we’re not alone. We’re collaborating. There’s multiple people involved here. And Hocum is very clear that we are specifically trying to soften the tension. This is what is special about Hocum’s proposal. We’re going to soften the tension between the author and the reader.

And that tension is that we’re going to want to make things unique. We’re going to want to put our own style on it. But users are going to come along and they’re going to be like, actually, can the text be bigger?

Can it be dark mode? Can you stop giving me parallax that’s going to give me seizures?

I don’t want to vomit when I look at your website.

The users have preferences. We want to give them agency.

Thanks for this slide, by the way, Christine. I wanted to get Jessica also using this slide, but I was too slow with my phone, so I had to jump into-- well, AI, Adobe Illustrator, and get Jessica into that photo.

And then I remembered that she had changed that to say ADHD.

I think she made some other changes to it. And then I was like, oh, I also want to change it so it says control over one’s web surfing. So then I put myself in.

I was up late last night trying to--

So the proposed scheme tries to give some balance across all of us involved in this web platform by giving the author and the reader the same notation. We all get to write CSS. We all get to provide those styles. We write our hints as declarations, a property and a value, color blue. And then we can wrap those up into selectors. We can attach them to style sheets. We can wrap them up into entire style sheets and connect them to HTML or link them together directly. And what we get is an ordered list or cascade of style sheets. That’s the result of everybody providing the styles that they want. And it’s not a coordinated thing. None of us are talking to each other and being like, you provide colors and I will choose the fonts. And we’re all just providing the styles that we want. And then somehow we have to figure out what’s going to happen. Everybody just sends their styles along. And of course there’s going to be conflicts. So we can assign all sorts of backgrounds to the same button. And I don’t know what’s going to happen here. Is it going to be gray, dark blue, dark green, the submit color, black, maroon?

For the browser, every CSS property-- There’s something like 596 of them or something. Every CSS property on every HTML element-- So we go through the page and we say, OK, I’ve got a div, I’ve got a button, I’ve got the main, I’ve got some links. Sorry, I’ve got a div, I’ve got another div, I’ve got a div. And I’ve got-- I don’t know how you write.

Every single element on the page has 596 properties. And every one of those properties has to have a single value, one value. There can only be one and we have to somehow get to that one. So every button needs one background color and one text color and one padding left and one margin inline end and so on and so on down the whole list. So we need some sort of thunderdome where we can send all these styles in and then-- Yeah, put Tina Turner in the browser, you cowards.

The simplest way to choose a winner would be to just take the last one, right? Take the last one, ignore everything that came before it. That seems simple enough. But then somebody has to go first. And who’s that going to be?

I mean, when we’re just talking about our own styles, maybe we can coordinate amongst ourselves or amongst our team what styles go last. But if we’re coordinating with the browser and with the user, how are we going to determine who goes last? Who gets that final say? Someone has to go first and someone has to go last. So we have to take that cascade of style sheets and somehow resolve it. So we get the origins out of this, the cascade origins. This is the start of the cascade. And we start with the styles that are already there. We already have browsers providing default styles. They were doing that before CSS existed. We’ll just codify that in CSS and say they went first already. We’ll let that be the baseline. And then we’ll build on top of that.

You can’t render text without styles. So it’s there. Actually, we can look at-- let’s see.

It’s not giving me a link to the-- I won’t jump into it.

This document has styles. This is-- clearly, it doesn’t have CSS styles or it didn’t initially because it is the proposal for CSS. But it does have these horizontal rules and a blue link. So it’s getting styles. Those are coming from the browser. And we could remove all of those styles by setting all properties to initial. And what initial does is it rolls back even farther than browser styles. We get the initial values. Every property has an initial value in case something else wasn’t specified. So the initial value of display is inline. The initial background is transparent. The initial color is canvas text and so on down the list.

Yeah, display inline. So if we set all of these elements back to their initial display, we don’t get inline for spans and block for some other things. Everything goes to inline. Everything is inline. At the beginning of a web project, everything is inline before browsers add styles. Even things that we think of as hidden, like the head and the title element. Those become inline if we set everything to initial. And we can see it showing up there in the document. So everything is inline. And then browsers come along and say, actually, a lot of things should be display block on specific elements. And some things should be display none. And they provide all that readability that isn’t there if we just made everything inline like it was. And then they also add the eight pixel margin just to give us something to do.

Make links blue.

Give us headings that are big. I don’t know.

And we can go read all the user agent styles. They’re all available. And more and more, they’re pretty much the same, but there’s still some differences between them. I’ll share the slides out at some point. And you can follow these links if you’re interested. And then so the browsers have gone. They’ve provided a baseline for us. And then users come along. And users can provide styles.

And ideally, using the same notation, CSS.

And this is still how Safari works. You can go into your Safari preferences. You can select a style sheet. You can load it up. And it will apply to every page you go to. I recommend it. I do. I do. I do. I do recommend it.

In other browsers, they’ve mostly moved towards a sort of graphic interface that then just writes the CSS for you. It’s the same things. It’s just, you know, some CSS but in a form. It’s just Webflow for anybody.

You can change your font size. You can choose your default font. Set some colors, et cetera. So, yeah, you can there’s various different ways that you can do it. And they provide slightly different if they’re providing a graphic interface, they have slightly different set of features that you can control. But mostly it’s fonts and colors and text sizes. And to be clear, when I talk about users, I’m talking about us. Like every single one of us. I think it’s pretty fair to say that we all spend more time surfing the Web specifically

than we spend building it.

We’re all Web users.

And that’s great. We all use the Web more than we author it. And we’re all allowed to have preferences.

We do have preferences. And it’s fine for you to put them into the browser. You can tell the browser what you want. Make the Web your own.

Set your fonts. Choose your favorite fonts. Why are we leaving at times? It’s absurd. Set what you want. It’s already hard enough to be a person.

It’s especially hard to be a person reading that small low contrast text on your website.

So go ahead and make it your own.

Like I do. I set my preferences. Because I have fonts that I like. I like larger text.

And I like to see what happens when other people are setting those things.

At first I worried that, like, well, if other people are mostly not setting those things, then I’ll be seeing something different than most of my users. And then I was like, no, that’s the point. That’s the whole point. We’re all supposed to see something different. And I want to know, I want to recognize, oh, that’s the font that I picked.

They’re letting me use my font here.

Wikipedia will let you use your own fonts. There’s other sites that will surprise you. And you’ll be like, oh, that’s my font. I chose that.

I recommend doing it. Finally, we come at the end. We come along. And we are the final cascade origin.

We come last after everybody else. And we just, like, smear our personal brands just all over their lovely styles.

Or stomp around force choking them.

We’re the baddies.

But Hocum was clear that if conflicts arise, the user should have last words. So what are we doing at the end of that style? So his proposal, yeah, oh, this also became a design principle. If a tradeoff needs to be made, always put user needs above all. I think that’s great. But we’re at the top of the cascade. So what’s going on?

His proposal was that we will all add a percentage after every value. Color blue, 64%.

That’s how much we care as a percentage.

I love this system.

So if the user says, I care 64%, it sort of doesn’t matter what the user says. It sort of doesn’t matter what we say. We come along and we say, actually, I want red. And I care more than you. I care 100%. Too bad. They went first.

They already took 64%. All we get is 36. We’re just dropped down to what’s left over. They pass over the remaining influence. And then what we get is a mix.

The user wanted blue. We wanted red. Here’s the purple that nobody asked for.

You’re welcome.

And I love this. It was pointed out pretty quickly that if I wanted blue on yellow and you wanted yellow on blue,

we might have a problem.

And also, how do you get the mix of times and Helvetica or, in this case, Papyrus and Comic Sans? I wish we had tried harder to solve this problem.

I think we gave up way too easily. But then this is the end of his proposal, is we could have these sliders. Browsers could provide sliders where the user says, I’ve got my styles, you’ve got your styles, and I can just move along this range slide. It’s just the ASCII art of range sliders.

So I can go. I’ll use the author’s fonts, but I’ll use my colors. I love this. We should always be doing this. It’s so good.

Having control, having agency, that’s the whole point here. Why aren’t we giving people this much agency? We should.

So you can see how this was simplified.

What we ended up with is 0% on everything. And then you could sometimes say 100%.

And that just became bang important.

And this is what importance is for. It doesn’t exist for you to get in fights with your design systems team over who’s supposed to do what. It exists for the origins to take back control. And specifically, it doesn’t add specificity. It creates three new origins in reverse order. So it goes the user agent, the user, then us, then us again, the important styles. Ours are just together there. And then the user gets to go after that if they’ve said anything as important. And they still can.

And the user agent also uses importance to override us and to override the user. To play cleanup at the end, the referees. So we sort of get these two alternate universes where our evil twins have goatees.

Or you can think of it as a tennis match, like volleying this back and forth. Or if you’re more of a squash person, that works too.

But yeah, this is user agent styles from, I think, Firefox maybe. I don’t remember which browser I was looking at. But you can see they use importance.

Area display none, important. Iframe full screen. Can’t have a border or padding. Things that we just think of as not allowed are sometimes not allowed in this very specific way. The browser adds importance and we can’t override it. Even browsers that provide this graphic interface sometimes provide importance. There’s a check box. I think this is in Firefox. And if you uncheck the box, you get important styles.

Your fonts and colors override the site’s fonts and colors. So the purpose of importance is not for us to get into these petty specificity wars with each other. But specifically for browsers and users to protect styles from us. We’re going to come later and they need to say, I know that I go first, but also some things are important. Please leave these in place.

And that’s how they protect themselves from our stomping around. And it makes sense that we sort of think of it as like extra specificity because we’re here on our own in the middle. We’re sort of ignoring the whole universe around us. We start to think that it’s all author centric, the whole thing. But really we’re just sort of hanging out over here and the whole cascade is happening around us.

So a Jedi uses the cascade for knowledge and defense, never for attack.

OK, so we’re not just dealing with unknown content, unknown collaborators, infinite and unknowable canvas operating systems. Like all of this, which is pretty extreme, but also infinite diversity and infinite combinations.

Different people with different preferences, most of them able to override us. The browser is allowed to ignore us.

And the whole point of CSS is that we don’t have to think about all of those variables. We just provide a few constraints and let the browser work out the details.

It’s why CSS is a declarative language.

So we get lots of these declarations with 500 pixels and we can look at that and think, well, that’s pretty simple. I know what that does.

But it’s often a bit more... Some properties are more abstract. Text-wrapped pretty.

Jessica? Do you know what?

Somebody probably knows what this does. It makes it pretty. That’s simple.

Whatever that means.

But even these simple declarations with 500 pixels, I feel like I can tell you what that does. But when we start to dig into it, what do we mean by a pixel? What happens if I zoom in? Is a pixel the same size when I zoom in?

What if I change my font size? Is a pixel the same size now? What does a pixel mean? Are we talking about the width of the content or the width of the whole box with the borders?

Or should this really be based on context, the parent element or the viewport or the container? Or should it be based on relative sizing with siblings and how much space is available?

We should stop looking sideways and look within and consider the content. Should it be based on the minimum content or the maximum content? What are we actually trying to do with this width? What do we mean by 500 pixels? Is this what we mean? And are we expressing it right? What if we’re not actually talking about the width exactly, but we really... That’s just the direction that text flows. And if text were to change, we would want to change as well. Are we talking about the inline size and not actually the width? Maybe we should be more explicit to say inline size. And maybe we should be basing it on the size of the font. Is that what we want? Are we trying to create a line length of a certain number of characters? Maybe we should be more explicit about that. Or some combination. Maybe we want the minimum of a certain number of characters with a maximum of 100%, so we’re not overflowing. There’s all sorts of things that we might mean here by setting our width. And CSS is all about this problem of context. We have this viewport that sort of constrains us. And then we’ve got all this content that’s in there, and it’s trying to go somewhere. And the content is just taking up space, and the viewport is saying, “I only have so much space.” And somehow we have to figure that out.

And that’s the whole problem of layout on the web, is this content pushing out and the context pushing in. How are we going to ensure that things fit onto every container that we pour them into?

So we often don’t have all the information. And often the most powerful things in CSS are when we just tell the browser, “I don’t know. You do it. Make it pretty.”

This is the most powerful stuff in CSS, is just, “Go figure it out for me.” And like all design choices, our styles on the web are contextual. A and B are the same color. That’s what this illusion is. But we don’t know the context always.

Things look different in different situations. There’s no such thing as functional design with no side effects. Everything is side effects. The whole field is side effects. Design is just side effects, and we’re doing design if we’re writing CSS. There’s no such thing as a pure CSS function. It’s just side effects the whole way down. And then CSS is written that way too, where you set display none and now your width doesn’t matter. There’s all sorts of places where one property changes how another property works.

So really what we’re doing is something a little bit more like poetry, like trying to express. Like how can I express to the browser what I mean in, I don’t know, using the best words, the most expressive words possible, but not too many of them? How do I convey exactly what it is that I’m trying to do? Not how to do it, but what it is that I want from this design. And to get there, subtext is essential. So in some cases we might think, well, 16 pixels, 1M, those are often the same thing. Maybe. This is the default browser font size medium, 16 pixels, 1M, maybe. But they mean just fundamentally different things. They have different subtext to them. And that’s why we have so many units in CSS, is we need ways of expressing all these different things that we might mean by 16 pixels. We might mean 1M. We might mean something else. And we want to be able to express that more clearly. It’s similar with layout techniques. We might think, well, I can create the same layout using flex or grid.

Yeah, hi. We were talking about this earlier.

We might be able to design the same layout with flex, flex, or grid. But they mean different things. They move differently. And at the point where we stop watching them and it goes out into the world and somebody loads it on a device that we didn’t think about, they do different things. And so we need to be thinking about what is the subtext that I’m providing, not just did I make it work on my device. Because the web isn’t just about making it work on my device. It’s about knowing the risks and then planning for them. Designing for change.

Design for change to design for change.

Huh. I think that slide is broken, but I like it.

Yes, we should design to change to design for change.

Yes.

The fact that we control the paper page is a limitation of that medium. We have more power than that. We can do more, but we have to do that by doing less, by having less control, by providing hints that the browser is allowed to ignore. We need to express things that the robots can understand and take and do something else with. And they can figure out what to do when incidents happen, because incidents always happen.

So to me, this meme perfectly captures, and let’s just pray to the Wi-Fi gods.

Oh, no. We’re not going to do it, huh? That’s not what I wanted.

Oh, it’s actually just a broken link.

Let’s see if we can get to it.

Yes.

Okay. So we might be able to just make some different decisions here. Do I need to go larger on the font size still? Maybe.

Let’s see if I can do that. Nope. We’ll do just this.

So I think this meme actually perfectly illustrates exactly what we’re trying to do in CSS and where it goes wrong if we start to get too cocky and think we know better than the robots.

Jan is brilliant. He built the robots right. Okay? We can trust him.

So the problem here is that we thought that we can make the font really big and then make the box really small and that things would be okay. Like, what were we thinking? We have to do something else. So, I mean, the first thing we can do is like nothing. We could just not set those, and if we don’t overflow, that would be a solution.

We could also say, let’s give ourselves a min width. So the max width is still there is 2.5 m. But now we have a min width of min content. It’s just going to be the minimum of the content can do. If you want to see what max content does there, it’s just going to try to... Well, that’s the min width. Let’s set the width.

And we’re going to have to remove that.

These properties all affect each other. Oh, it’s not going to give me max content.

That’s interesting.

Live code.

We could also say, well, okay, I care about the shape of this box. So I’m going to leave that 2.5 m. I really want that square, and I’m just going to change how words wrap. Well, okay, I’m still overflowing there, so I’m also going to set overflow.

Yeah, okay. That’s an option.

We could set ellipsis on that if we want. We could say scroll instead or auto. I mean, just like if we can use auto, I love auto. Auto, not just for overflow, just auto on everything. It works great. But we have all sorts of options here. We can change how the text wraps. We can change how the box sizes. We can change how things overflow, and we have all sorts of options. We don’t have to just blame the browser for protecting the content when we gave it an impossible situation. The browser has to do something because we’re not alone, and it has to render something for our users, the people reading our websites. We’re responsible to them. They’re trying to use their bank account or something, and we’re getting in their way by trying to make things square. Who do we think we are?

It doesn’t need to be square.

Always put user needs above all. Always respect the user. This is our job as designers and design engineers, not forcing everyone into a single experience, but thinking how do we set up the circumstances that are simple and yet contain the ambiguities of human existence? I’m quoting from a theater director, but I love this. This is what we’re doing on the web. We’re doing theater. We’re doing live performance. We send our script out there, and then every browser tries performing it, and then we see how the user likes that performance. We need to capture this incongruities and the change in different venues and different performers.

Whatever happens, we want to protect the content. It should be viewable and accessible by default. What happens if we just do nothing? Like it’s already viewable by default. The browser is doing that for us. Our job is not to make it worse.

Thank you.

Speakers