Why Is CSS So Weird?

Summary

このビデオスクリプトは、CSSがウェブ上でのレイアウトに不可欠であること、そして人々がCSSに対して持つさまざまな意見を探ります。CSSは文書向けに設計されたという批判がある一方で、ウェブが進化しアプリケーションを構築する場となった現在でも、CSSはその役割を果たし続けています。ティム・バーナーズ＝リーがウェブを発明した当初の目的と、CSSがどのようにしてウェブの成長に適応してきたかについて説明し、CSSが異なるデバイスや表示方法に対応するためにどのように設計されているかを解説します。最終的に、CSSの奇妙さは、ウェブが多様な環境で動作するための適応性と柔軟性を提供するためのものであり、これはウェブの根本的な特徴であると結論づけます。

Takeaways

• 😀 CSS was created for documents, but has evolved for broader web applications
• 👩‍💻 The web gives control of display to the user, not the designer
• 🌐 CSS allows web content to adapt across contexts and devices
• 🖥 Browsers parse and display CSS based on an algorithmic cascade
• 📐 CSS works through flexible design suggestions, not rigid programming instructions
• 😕 Losing visual control is a tradeoff for universal access
• ⚖️ Graceful degradation is an intentional feature of web languages
• 🎭 CSS relationships create contextual meaning, like theater stage directions
• 🔧 Overflow in CSS avoids harming content over design constraints
• 🌈 Accepting lack of control allows more accessible, flexible designs

Q & A

CSSがウェブ上で使用される主な目的は何ですか？

ウェブ上でのレイアウトやデザインを定義するために使用されます。

CSSについてよくある意見は何ですか？

CSSは壊れている、素晴らしい、またはその両方であるという意見がよくあります。

「CSSは素晴らしいが、オーバーフローのデフォルトに何か問題があるのではないか」というミームは何を示唆していますか？

CSSの挙動が予期せぬ形であることを示唆しており、それが機能かバグかについての議論を呼んでいます。

CSSが文書向けであるとの主張に対する反論は何ですか？

ウェブ全体が当初文書向けに作られたが、技術の進化によりアプリケーションなど様々な用途に対応可能になったという反論があります。

CSSが「変わった」言語であるとされる理由は何ですか？

他のプログラミング言語やデザインプログラムとは異なる動作をするため、特異な言語と見なされます。

CSSの「カスケード」とは何ですか？

異なるスタイル情報源を組み合わせ、それらがどのように互いに上書きするかのルールセットです。

CSSを宣言型言語とする理由は何ですか？

特定の結果を再現するための手順を記述するのではなく、望ましい結果の意図を記述するからです。

CSSの設計思想において、なぜ「クライアント側に制御を残す」ことが重要なのですか？

ウェブが異なるデバイスでアクセス可能であること、そしてユーザーが最終的な表示を制御できるようにするためです。

CSSの「頑強性」とは何を意味しますか？

未知の要素や属性を無視し、後方互換性を保ちながらエラーを静かに処理する能力を指します。

CSSがプリントメディアとウェブメディアの違いをどのように扱っているかの例は何ですか？

プリントメディアではデザイナーが全てを制御できますが、ウェブではユーザーやクライアントデバイスが表示を制御するため、CSSでは適応性や頑強性が重視されます。

Outlines

00:00

🌐 WEBの誕生とCSSの必要性

ティム・バーナーズ=リーが1989年にWWWを開発した際、接続されたドキュメントを共有することを目的としていた。当初は科学論文を共有することが主眼だったが、ウェブはドキュメント共有の場として誕生した。CSSはその本来の目的とは異なるものの、ドキュメントをレイアウトするために必要不可欠なものとしてpositionsされている。

05:00

🌐 W3Cのミッションステートメント

W3Cはオープンスタンダードを推進し、誰もが利用できるウェブの実現をミッションとしている。これはティム・バーナーズ=リーの当初の理念を引き継いでいる。ウェブ上のコンテンツ制作者からコンシューマーへのパラダイムシフトが起きており、コンテンツの表示方法へのコントロールが低下していることが課題となっている。

10:01

🔀 CSSの必要性

CSSは意図を宣言的に記述する言語で、ブラウザが柔軟に解釈してレイアウトできるように設計されている。これはウェブが多様なデバイスで表示可能であることを実現するうえで重要な機能である。CSSはドキュメントからアプリケーションへの移行を視野に入れた言語なので、意図的にそう設計されていることを理解する必要がある。

Keywords

💡CSS

カスケードスタイルシート。ウェブ上のレイアウトとスタイルを制御するために使用される。

💡文書

最初のウェブサイトは文書を共有することに焦点を当てていた。

💡適応

CSSはコンテキストに適応する必要がある。ブラウザーがさまざまなデバイスでコンテンツを表示できるようにする。

💡制御

印刷されたページとは異なり、ウェブ上ではクリエイターが最終的なディスプレイを制御できない。

Highlights

CSS is intentionally designed to be device-agnostic and degrade gracefully across different interfaces

The cascade in CSS allows multiple style sources to combine into a single rendering, with the browser making final decisions

CSS is a declarative language focused on intent rather than steps to achieve a visual output

On the web, the client controls display rather than the content creator having full control

CSS provides graceful degradation and progressive enhancement out of the box due to its resilience

Context is very important for CSS due to diverse interfaces and interactions

The CSS presentation layer is designed to be optional and fall apart gracefully if needed

Allowing content overflow is the default in CSS to avoid losing data

Losing design control is a feature on the web, allowing universal access across devices

CSS works best when width/height aren't overdefined, using relative units instead

The web's adaptability to context means applications lose some design control

CSS helps design for an unknown canvas across devices and interfaces

Losing absolute design control is a limitation of print, not the web

The web gains universal access by giving up some design control

CSS is uniquely equipped to handle designing for unknown contexts

Transcripts

(upbeat music)

- If you're anything like me,

you spend a lot of time making things for the web.

And that often involves using CSS

to lay things out on the web.

Whether you're using that with a preprocessor

or directly in raw text files

or through JavaScript in some way,

CSS is something that we all have to use on the web.

And we hear quite often a lot of opinions about CSS.

It's either broken or it's awesome

or maybe sometimes both at once.

This popular meme,

CSS is awesome but seems to imply that maybe

there's something wrong with this overflow default.

And it's a little bit of a, is it a rabbit?

Is it a duck?

Depending on how you look at this,

it's either a feature or a bug,

but either way we have to express

our opinion loudly on Twitter.

And I hear often that the problem with CSS

is that CSS is for documents.

And now we're building applications,

and applications are in such a different field

that CSS will never make that transition.

And that's partially true.

When Tim Berners-Lee invented the web

in 1989 and 1990 and made the first website,

he was very clear that he was trying

to make a web of connected documents,

and specifically at that point scientific articles.

He had this vision for making these articles

available to scientists around the world for free.

You can see here emulated the Line Mode Browser

for older machines without graphic interfaces.

And I have to use numbers to go to a link.

Here it says the project is based

on the philosophy that much academic information

should be freely available to anyone.

But it's not really fair to say

that CSS was only for documents.

It's the entire web that's only for documents at that point.

And it's a little bit like saying

that the Gutenberg press is only for bibles

just because that was one of the first use cases.

The web is a very young medium,

at this point less than 30 years old,

and we're still figuring it out as we go.

But the underlying technology is developing quickly,

both the devices and computers that we're working on,

also the languages themselves, and also what we're building.

And it's an open standard

so we can all work on that together.

And as the web grows, we make more and more web things,

moving from documents and sites to applications,

basically full desktop and mobile applications,

entire businesses exist on the web.

We're building all sorts of cool things

and they're getting bigger and cooler

and more difficult to build in lots of ways,

and that raises the question

what are we going to do now

that everything is on the web?

Do the same rules apply?

Does CSS specifically work on the modern web?

And really why is CSS so weird?

'Cause it is weird.

It doesn't work the way that a lot of other languages work,

and it doesn't work the way

that we're used to design programs working.

It is a very strange language.

And part of that goes back to these early documents.

And this time I'm going to look at it in a modern browser.

The same file still work even in our latest browsers.

And some of the constraints that

Tim Berners-Lee mentions here

in this first website already,

when designing the HTML document type,

consideration was given to a certain simplicity

in order to allow many browsers

and hopefully many editors

to be developed on many platforms.

In order to make this platform agnostic,

HTML is a very simple language intentionally.

And the same is true of CSS a couple years later.

But here, this implies no device-specific markup.

That makes sense, we don't want anything

that can only run on one machine or on another

because that would defeat this global idea of the web.

Or anything which requires control

over fonts or colors for example.

And what he's noticing here

is that if we're going to allow multiple devices

with different graphic abilities to display the same web,

then we have to give up control

of fonts and colors and display properties.

So right from the beginning,

there's a problem with design on the web.

It's problematic to design in a way

that's going to be device agnostic.

In 1994 Tim Berners-Lee forms

the World Wide Web Consortium

with a number of businesses.

The membership is quite large

and made up of all sorts of organizations

from easily recognizable tech companies

to browser vendors to banks.

Anybody that is interested in the future of the web

can become a member of this organization

and help guide the web into the future.

More important here on the W3C website

is this idea that it has a mission statement.

The web has a mission statement and it's based very much

on that initial document from Tim Berners-Lee.

We have the open standards principles which mean

that everything is going to be developed in the open

and no one company isn't going to have control

over the future of the web.

But then we also have these ideas,

this principles of the web.

It's a web for everyone which includes

both accessibility issues and internationalization.

And it's a web on everything,

it's a web of devices,

it's a web that can be on mobile,

it can be on watches,

all sorts of different technologies.

That mission carries on

and some of the same design problems carry on with it.

This is a radical shift in power

from creators to consumers to audience.

Audience now controls the display of my content

which wasn't true on the printing press.

If I'm designing a poster or a T-shirt

or anything that's going to be printed,

I can control every step of the process

from the colors and the fonts

to what I'm printing on

and what type of printing I'm doing.

And when I ship a final product,

the audience that I send it to gets exactly what I designed

and they see exactly what I intended for them to see.

On the web that's just not the case.

On the web the client controls the display.

And by client I mean everything

on the other end of the system.

The people on the other end

can choose their settings, their default settings,

they can add styles to my site for their browser.

Their device has some control

over what it can handle and what it can do.

The browser itself also affects the capabilities.

There's all these pieces that have to get put together

on the client side to display.

And I don't know all those variables

when I'm writing an application.

In reality we're designing for an unknown infinite canvas,

and we don't have all the variables.

Rather than designing with this control

over exactly what we should ship,

we're designing for change

and for movement and for adaptation.

We know how to do this,

this is not unfamiliar territory.

We can make car seats that move forward and backward

so that different people fit.

Seat belts do the same thing.

We can broadcast color TV

and watch it on a black and white television

because the technology understands

how to degrade gracefully in these ways.

Cascading style sheets are built around the same idea.

They're first proposed in 1994

and then the spec is written in 1996,

but they don't actually appear fully

in any browser until the year 2000.

What cascading style sheets do,

the reason for the cascade is to take

all these different sources of information,

all these different variables, and put them together.

The cascade is a set of rules for how these different styles

are going to fit together and override each other,

and in the end the browser takes all of those variables,

puts it all together and comes out

with a single final rendering style.

And only the browser can do that

because only the browser has all that information.

So as a designer I'm no longer controlling the output,

I'm suggesting and that's why CSS is a declarative language.

That means that rather than describing,

as we might in JavaScript,

the steps to take to recreate a specific outcome,

I instead describe the intent of my outcome.

What am I going for?

What am I pushing towards?

And I'm trying to give the browser

as much meaningful information as possible,

subtext and implications,

so that the browser can make smart decisions

about what to do with those styles.

That's where things like Normal Flow,

the way that block and inline elements flow together,

and relative units allow us to create

these relationships in a meaningful way

so that the browser can make smart decisions.

It's an intentionally resilient system

and resilient language where everything fails silently,

and we can actually see that here again on his site.

The hypertext markup language,

parsers should ignore tags which they do not understand,

and ignore attributes which they don't understand

of tags that they do.

So even at the smallest level,

browsers are supposed to understand

everything they can and ignore everything else,

and that's how we get this total

backwards compatibility where the early website

is still available on modern browsers

because everything is resilient,

everything is backwards compatible.

It also has to be intentionally contextual for this to work.

Everything depends on

not only the size of the screen

but the type of interface.

How are you interacting with it?

Is it a keyboard?

Is it touch?

And broadening out,

is it a braille keyboard?

Is it headphones?

Are you listening to websites?

There are so many different interfaces that the same styles

just wouldn't make sense across interfaces.

And so context is very important to CSS.

And that's fundamentally different from most languages.

In JavaScript we try to isolate functions,

and in CSS isolation doesn't actually make much sense

if we're looking at this

in terms of the fundamental vision

of device agnostic content.

So really CSS is this presentation layer

that we're okay losing.

That's fundamental to the web

that we can layer these styles on top

but they have to be optional

because some people are using the internet

through systems where they won't see this presentation.

And that gives us right away graceful degradation

and progressive enhancement built in.

The whole thing is supposed to fall apart in a graceful way.

That's how the web is designed.

So when we're looking at this meme,

we've over-defined some things for how CSS works.

CSS is going to work best when we don't define

both height and width at the same time,

or in this case define a font size that is so large

that the font overflows the width that we've set.

It generally works better if we use min-content

or something that is going to respect the content

that it's flowing around

because the browser has to make these decisions for us.

We don't have to get that visual overflow.

There's many different settings that we can use.

Overflow visible is just the default

because CSS is designed to not lose content,

to not cause harm.

In order to not cause harm,

we show what overflows by default.

And we can see that that's different

from a program like InDesign

where here I had to use two separate boxes

in order to get that same image.

Because in InDesign when I overflow a box,

and let's actually take that slower,

things simply disappear completely.

I don't think that that's a better system for the web.

That doesn't seem like the sensible default either.

But they're trying to solve different problems.

InDesign knows that you'll come back in

and make some adjustments,

whereas in CSS the browser has to make

the adjustments for you.

As a playwright, this stands out to me

as something that I do in another field.

So when I write a script, I know that the actors

are going to say the lines that I wrote,

and they'll say them in the order that I wrote them,

and I can even mark it up with who should say what.

But when I write stage directions,

I can say how I think the set should look

and how I think the characters should look

and how I think they should act.

And I can say all these things

but all of them are suggestions,

and the production company

is likely to make their own decisions

and to throw out my stage directions

and do something completely unique

because they're working with different actors

in different spaces under different constraints

and for a different audience.

And it makes sense that the performance

has to be updated to fit a new context.

Like theater, CSS is contextual,

and we can make those suggestions,

but we can't insist on the final design.

CSS is intentionally different.

It intentionally works this way.

And to quote John Allsopp from the year 2000

when CSS was first coming into browsers,

he says, "Really we can think of this

"as a bug of the system,

"or we can think of control

"as really a limitation of the printed page."

It's a limitation of print

that I can control everything in it,

and if I hand my poster to somebody who can't see,

they have no ability to read it.

And it's a feature of the web

that anybody can access it from any different device.

That's actually a feature and that's something

that we should embrace and figure out how to use.

And it doesn't mean that the problem is solved entirely,

but CSS is designed around that idea,

and that's always going to be a difficult problem to solve,

but one that we have to do in a smart way

that keeps the control on the client side.

Because the web adapts to context,

so even the modern web,

even the most powerful applications,

desktop style applications on the modern web,

when we put them on the web,

the reason to do that is we get universal device support,

but the trade-off is we lose control, and that's a feature.

And CSS is there to help us design

for that audaciously unknown canvas

in a way that no programmatic language would be able to do.

That's why CSS is so weird.

(upbeat music)