CSS: Thinking Outside The Box Model
--
Disclaimer: This is not a lesson on what the CSS box model is. If you are new to CSS or the terminology try checking out W3.org CSS Box model or The CSS Box Model by Chris Coyier.
So…
The “Box Model” is the fundamental dictator of presentation, on the web. It keeps things in a formation that we are familiar with in the physical world but also (and arguably) hinders creative freedoms to some extent.
- This article addresses the problems the box model was intended to solve, our cultural progression of design expectations, the problems the model has become and how we can think outside the box (so lame) for the foreseeable future of layout design, for all visual formatting, not just the web.
So, what does the box model solve?
Believe it or not beloved CSS hipsters, presentation on the web existed before CSS; ViolaWWW was one of the first browsers on the scene around 1992. It boasted styling, object oriented scripting, tables and much more.
The motive of CSS was to separates content from presentation, which it has been successful at. CSS 1.0 also introduced a more defined formatting model (box model) below:
At the time, it was noticeably capable. CSS2's box model was the succession that added position properties, position attributes, z-index layers and the table format (which everyone loved so much).
Why was “tables” considered by many as a “de-facto” for web document layouts for so long despite knowing it was not in best practice?
Long story short…
The CSS box model exposed problems as it solved problems for the advancing inter-web.
The Mondrian Challenge
A content formatting model should simply be able to replicate any “De Stijl” painting by Piet Mondrian, with text & media content within each rectangle, each rectangle’s minimum height should adhere to the inner content’s height without the aid of scripting.
I believe this is an appropriate modern-day challenge not only for CSS but for content formatting models within all types of mediums. There is a chance I may be wrong, it may be possible with CSS. I have been unsuccessful, with and without the flexbox property. If you think you can “simply” replicate this idea in CSS please take the challenge, and wear the crown. (Simply or not, it’s still an impressive bar to raise)
The purpose of The Mondrian Challenge is to keep our ideas of content presentation cutting edge.
Is the box model undesirable?
The outermost container in your HTML is the initial containing block. A containing block is just a rectangle that contains an element, a containing block is also an element.
If an element has relational positioning the containing block is formed by the content edge of the nearest block container or ancestor block.
From a JavaScript perspective try to consider the term form as being similar to how you consider “this”, and the initial containing block as the global scope. Although, they’re not realistically comparable, if so functions would also inherit the scope of neighbour functions.
Relative positioning
One major flaw of relative positioning in CSS is that elements only float horizontally. Unfortunately, the CSS Flexbox property doesn’t solve this incapability, nor does it tackle it sincerely. But to be honest, it was never intended to.
Absolute positioning
With absolute positioning, the format of the containing block is determined via the nearest ancestor with a defined attribute of either absolute, relative or fixed. The issue with this aspect of the model is that you’re always depending on unwanted attributes, you have no choice but to override them or create more containers to work against undesirable behaviours that were maybe desirable 19 years ago.
Inline, you’re drunk go home
If the nearest ancestor is an inline element, the containing block forms to the bounding box of that inline element, neighbour elements or by the padding edge of the nearest ancestor… yes, it’s boring and messy.
Why this r e p u l s i v e n e s s ?
Initially, CSS was a desirable fit for slow-ass bandwidths, low resolutions and old school performance that provoked people to smoke more, do drugs & commit affairs. Here are some answers to why it was once a great thing:
- No scalable text. Vector-like behaviour was not as cheap in performance back then, as it is now.
- Cascading overrides. A Simple & light-weight paradigm, great for low bandwidth and it still remains one. (credit where due)
- Initial lack of interactivity. Some areas of the DOM were notoriously slow, the best way to not perform poorly is not to perform at all.
- Accessibility. Considering all, CSS is pretty good at accessibility.
- Preventing people from doing stupid shit. Even the worst websites out there are constrained to a format, thanks to the rigidity of the box model.
What do we want?
What we craved for back in let’s say 1996 are not the same things we crave for today. We want unrealistic, nonsense, zero-lag, 3d computer interfaces with the little stupid “tingy” noises computers make in the movies… -_-
Ok, maybe we’re a little more sophisticated than that, but here are some of the things we should be able to do in 2015, regarding content formatting, without the need for polyfills, hacks and nervous breakdowns:
- The Mondrian Challenge.
As proposed previously, we should be able to put content in each rectangle and have each rectangle adhere to the flow of the content.
It would be a bonus if the direction of the flow was attributional. It should just work!
2. Pan, Zoom & tracking. Because we are rarely concerned with just one document. Websites are no longer “documents” they are applications that present documentation. This is not just for aesthetics but the ability to pan, zoom & track within an application can benefit numerous industries on unprecedented levels.
3. Magazine style formatting. Although we have CSS shapes, some vendors see the notion as less of a priority. There are many print design layouts & styles that can and should be adopted by the web, not only text that conform to shapes or paths.
Any print, design layout style should be achievable on the web, whilst conforming to best practices without the need for nasty little hacks.
How can we improve the box model?
The discussion is more important than the how, but here’s a set of my ideas, maybe to inspire or ignore:
Bi-directional block flow, abolish ancestral inheritance of attributes (parent only, not up the chain), bi-directional text overflow attributes, float-by-force (layout containers as a state of collision), scalable text relative to the containing or initial containing width/ height.
..would that not break the web?
No, there are several ways to approach the elephant in the room, it won’t forget just because you ran, but it can be unimaginably complicated since everything in CSS is a dependency to the formatting model, but there are very smart people in W3 who may be able to make it happen. They are in theory servants to the community, and it takes a viable amount of interest and necessity to make these things (A thing).
The discussion is more important than the how.
