User:Zuhui/SI26/Weekly log/Why is CSS So Weird

On the web, the client controls the display.

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 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.

↘︎ I really like the expressions she use in the video, 'degrade gracefully' or 'fails silently'. It really shows that CSS lets browser to make the decision to adapt and omit if the display environment cannot necessarily reflect everything that was initially designed (also to consider that accessibility and adaptability are key goals of CSS).

Suggesting Language

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.

Subtext and Implications:
the meaning or intention implied within the code or style properties, even if it’s not explicitly stated. It serves as an implicit signal that helps browsers not just read the given properties but also understand their context and purpose to handle them appropriately.

e.g.:
Relative Units and Context

• font-size: 1em;

명시적 의미: 부모 요소의 폰트 크기를 기준으로 현재 요소의 폰트 크기를 결정.

서브텍스트: 현재 요소는 부모 요소와 밀접하게 연관되어 있으며, 부모의 맥락(글꼴 크기) 변화에 따라 영향을 받는다는 의도를 암시. 이는 요소 간의 관계성을 반영.

• width: 50%;:

명시적 의미: 부모 요소의 너비의 절반으로 설정.

서브텍스트: 이 요소는 독립적으로 존재하지 않고, 부모 요소의 레이아웃과 관계가 깊다. 브라우저는 부모 요소의 크기를 계산한 뒤 이를 기반으로 현재 요소의 너비를 결정해야 한다는 것.

Responsive Design Properties

• max-width: 100%;:

명시적 의미: 요소가 부모 요소의 너비를 초과하지 않도록 제한.

서브텍스트: 요소의 크기는 환경에 적응해야 하며, 크기 조정을 통해 콘텐츠가 잘리거나 엉키지 않도록 해야 한다는 의도.

Media query

• @media (max-width: 600px) { body { font-size: 14px; } }:

명시적 의미: 화면 너비가 600px 이하일 때, 본문의 글꼴 크기를 14px로 설정.

서브텍스트: 화면 크기가 작아지면 사용자가 콘텐츠를 읽기 어렵다는 점을 고려하여, 글꼴 크기를 줄여야 한다는 맥락적 고려를 내포.

imperative 명령적 language:
like javascript, where you have to explicitly specify step-by-step instructions, provides full control over the flow and all individual steps.

declarative 선언적 language:
like css, you describe the intended outcome, leaving the actual implementation to the browser (or other stuff). it conveys the goal or intent, kind of relinquishing control over the intermediate steps.

Intentionally Contextual

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.
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? 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.

Device Agnostic

To quote John Allsopp from the year 2000, when CSS was first coming into browsers:
"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.

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.