CSS One-Liners

http://alistapart.com/blog/post/ten-css-one-liners-to-replace-native-apps/

by Brajeshwar • 12 years ago

162 54 12 years ago

alistapart.com

jqm2• 12 years ago

Does anyone know of a good book on modern CSS?

I keep seeing new features I was unaware of and would like to find a comprehensive guide.

ics• 12 years ago

Just in the last few days I started reading through this: http://learn.shayhowe.com/advanced-html-css/

Edit: Keep in mind that the features discussed in the parent link are not usable today beyond Opera (of which the author is the company's CTO).

jqm2• 12 years ago

"Keep in mind that the feature..Opera"

Thanks, I just quickly skimmed the article stopping at the code samples and didn't catch that.

drifkin• 12 years ago

It looks like there's partial support in other browsers too (I think it's still vendor prefixed). I see columns in Chrome using the example page:

http://www.wiumlie.no/2014/css-figures/koster/prefix.html

It seems like some of the more advanced features like spanning multiple columns hasn't made its way to Chrome yet.

goldenkey4• 12 years ago

CSS constantly is moving forward. Reference books are for scrubs when you have the internet.

https://developer.mozilla.org/en-US/docs/Web/CSS

bennettfeely• 12 years ago

The web platform is certainly giving developers more and more control over typography, which is great, but has always been an uphill battle when working with different screen sizes, browser limitations, and well, CSS itself.

The float property was one of the most confusing CSS properties before "CSS Figures". This article introduces lots of new and strange (...float-policy?) properties and lots to learn, that's for sure.

click170• 12 years ago

It seems that whenever there is an S followed by a T in the content on that page, they form some kind of curious little symbol. I haven't seen that before, is anyone else seeing that? Is this some kind of encoding problem on my end?

radq• 12 years ago

I don't see it on my end but I'm guessing it is a ligature:

http://en.wikipedia.org/wiki/Typographic_ligature

XaspR8d• 12 years ago

I don't see it either, but I do see all the fi's becoming fi ligatures. The CSS is specifically enabling it with the line:

    font-feature-settings:"liga", "dlig", "onum";

(and its vendor variants) liga is standard ligatures, dlig is the "discretionary" ligatures (less standard ones like ct), and onum is old-style numerals.

EDIT: Ligatures sure are weird in monospace though. I'd personally disable it for code samples...

http://www.microsoft.com/typography/otspec/featurelist.htm

http://blog.fontdeck.com/post/15777165734/opentype-1

https://developer.mozilla.org/en-US/docs/Web/CSS/font-featur...

Kiro• 12 years ago

There is no [...] media queries [...] involved. There is simply one highly responsive line of code.

The Koster archipelago example must be using media queries or am I missing something?

Bockit• 12 years ago

we can make the number of columns depend on the available space, so that a narrow screen will have one column, a wider screen will have two columns, etc. This is all it takes to specify that the optimal line length is 15em and for the number of columns to be calculated accordingly

It looks like the columns property can take a size value, which the browser will use to work out how many columns it can fit.

RussianCow• 12 years ago

Wouldn't this leave a bunch of white space on one side if the screen width is not an exact multiple of that size? That doesn't seem like a good solution to me.

haakon-wium-lie7• 12 years ago

No media queries are used, the HTML/CSS source of the document is linked to further down in the article.

return02• 12 years ago

Is there a reason we should stick with the newspapery multiple-column layouts? My impression is that they are a relic of the printing-presses era of newspapers and are difficult to read anyway (word-breaking is often, it's hard to trace back to previous reading spots compared to scrolling etc). That layout may look familiar on the eye, but that doesn't make it good.

matthewmacleod3• 12 years ago

I'm pretty sure we should retain them, although they are not required as often.

The problem is that beyond a certain width it becomes infeasible for the eye to correctly jump back to the start of a line. There's some research on this, but I can't find it at the moment.

Smaller screens obviate the need for this, some of the time. But I've seen a lot of layouts which just compensate using white space - that fits with current design trends, but tends to mean I have a 27-inch monitor with a strip of content down the middle. It looks clean and minimal, but I suspect columnar text will come back into vogue at some point, and offer greater information density.

j_jochem• 12 years ago

How is information density important on the web? Scrollable pixels are essentially free, as opposed to paper.

jahewson• 12 years ago

I've seen this claim a lot, but nobody ever links to the research. Does it exist?

return02• 12 years ago

Yes, i understand that, however one can constrain the width text of the text so that one doesn't have to , for example, move the head to read from side to side.

However, columns are 2 dimensional, meaning that skimming back and forth between them requires more complex spatial processing than scrolling up-down.

louhike• 12 years ago

There has been studies telling that people tend to read faster with multi-columns [1].

I need to find the link, but I saw a study concluding that it is mostly useful if you are a fast-reader. Slow-reader tend to be more at ease with one column. So it might depend on the persons reading.

[1] http://graphicdesign.stackexchange.com/questions/3553/why-do...

Htsthbjig• 12 years ago

Yes.

It is one of the requirements of super speed reading: http://en.wikipedia.org/wiki/Speed_reading

Basically you could train your peripheral vision to read too, not just your fovea. You also train your brain to put them in a buffer and make sense of it. Imagine a cone around the point you focus your vision. Instead of just one word you could read 20 or 30 at the same time. Your brain makes sense of it very fast(with short lines).

Your brain could read multiple lines at the same time and make sense of it, because it is ordered. With long lines the words under another word have no relationship at all, so the buffer has to be enormous, in practice you can't read multiple lines at the same time if they are long.

I could read super fast only(eight times faster than everybody else) if the content is formatted.

For me is so frustrating I created my own tools just for reading.

This has been know for a long time, in the typographers and designers world, formats like pdf have used this since their inception.

But programmers are a different beast. Web pages were functional but ugly and only now they are getting the functionality of pdf-latex twenty years ago.

oceanstone• 12 years ago

Interesting - hopefully these make it into Firefox & Chrome - time will tell, but they seem like they could add value.

chrisdevereux• 12 years ago

I wonder if this article would still have made it onto the front page if the title was "10 css one-liners to slightly improve the layout of webpages"

adrusi• 12 years ago

Adding the concept of paged layout to CSS is both cool and terrifying. Separating content into pages is a very powerful ability that I can see being quite useful, but it also adds a lot of complexity.

What do I do if my table gets split between two pages? What about my fancy border around the whole table, can I have it render a full border around each split segment of the table or will it just obnoxiously slice the border at the page break? Where will it decide to split the table, will my multi-line row get split down the middle? Moreover, how do all these properties affect the existing intricate layout mechanisms present in CSS?

I feel like these specifications will create fundamental conflicts in the way CSS handles layout, which will probably be resolved by forbiding the combinations of certain layout models. But that goes against the philosophy of CSS: composability.

CSS complects the ideas of UI layout and text flow with a surprisingly expressive language as a result, but those ideas are not truly compatible and eventually inconsitencies like this will arise. These systems push CSS past its practical limit.

robmcm• 12 years ago

Are we full cycle yet? Is this the new HTML table layout, it took what, 14 years?

rimantas• 12 years ago

Nothing in CSS can ever be "new HTML table layout." Is concept of separating content from presentation so difficult to grasp?

haakon-wium-lie7• 12 years ago

I agree that paged layout are both cool and terrifying. Scrolled layout are much simpler for the formatter as there always is more space to use. Splitting content into pages, known as pagination, can be hard when there are unbreakable chunks in the content. In most cases you can split tables nicely (if they are real tables and not typographical devices), but images should never be split.

Still, I think it's worth it. A nicely laid out page is a pleasure to read, and I've never heard of only who have scrolled through "War and Peace" -- the act of turning a page seems more graceful. And when you are reading for child on your lap, turning the page to see if there's an interesting drawing of a rabbit becomes an event.

Surely, scrollbars will not go away, but we should be able to support pages one the web, too. Web pages, for real.

bshimmin2• 12 years ago

The "wrap-contrast" example in the draft Figures spec is pretty astonishing: http://figures.spec.whatwg.org/#wrap-contrast

I wonder how well that would actually work in practice!

goldenkey4• 12 years ago

Wrap-contrast is a superb idea. This document is purely a spec though right? The image in the linked page was just a mockup or is there beta code for these features?

alanstearns• 12 years ago

You can use shape-outside: <image> in recent builds of Chrome and WebKit to wrap around an image's alpha channel. It only applies to left and right floats - affecting multiple columns is a bit further in the future

http://dev.w3.org/csswg/css-shapes/#shapes-from-image

j4pe• 12 years ago

It amazes me a little, and says something about Håkon's perspective, that all of his examples are newspaper pages.

This looks like the makings of a high quality spec from 2004. Granted, CSS should natively support responsive columns, but it's a solved problem. Does he really think that Figure support is what limits web from competing with native? The problem with presentation of web apps has always been that we use a language designed for describing newspaper layouts to structure a dynamic, morphing interface. And its creator wants more succinct descriptors for recreating the above-the-fold of the New York times at variable widths.

It's almost saddening when the creator of something is no longer the guy driving it forward.

haakon-wium-lie7• 12 years ago

Don't be sad, doing paged layouts is quite an interesting challenge in CSS. Native apps use the routinely and newspapers is just one well-known example. See the spec for more examples. Also, the challenge here is not to replicate newspapers, but to make the content responsive on screens of all sizes.

malandrew• 12 years ago

This was exactly the reaction I had as well. It's demonstrative of someone so hopelessly stuck in the past and unable to the potential of an electronic medium. Wh we continue to anchor web technologies to print idioms is beyond me. I'm not saying there are no classically useful concepts from print. Robert Bringhurst's Elements of Typographic style does a great job of educating one on the value and thinking of techniques from the print world. There are timeless principles that are directly transferrable to the present unchanged, but there are principles whose entire raison d'etre is tied to constraints and properties exclusive of print. Issues that are no longer necessarily applicable on the web.

haakon-wium-lie7• 12 years ago

We obviously have different points of view: I find that the best presentations on mobile devices often borrow more from paged designs than from scrolled designs. As such, I believe that being able to paginate content on dynamic screens is important for the future of CSS and the web.

Pages and columns have been basic building blocks in typography since the Romans started cutting scrolls into pages. This is not why browsers should support them. We should do so because they help us make better, more beautiful, user experiences on mobile devices.

kbart• 12 years ago

Multi-column text on a desktop? Stop. Now. Please.. I's sad to see that more and more websites are phones/tablets orientated and are often hardly usable on a desktop PC. I'm not against a uniformity of the web pages across various devices, but I'm yet to see an acceptable, mature solution.

haakon-wium-lie7• 12 years ago

Check out Wikipedia, they use multi-column layout nicely for their references.

jmreid• 12 years ago

For the section that isn't actual body copy and isn't for reading as one article?

That's not a good example of where multi-column works "nicely".

rostigerpudel• 12 years ago

My screen - like probably a significant portion of screens out there - is wide, 16:10 or 16:9. So without multi-column layout, I have three layout possibilities: Long lines (hard to read), large font (wasting screen real estate) or some form of fixed-width central column with auto margin (also wasting real estate).

With multi-column text layout I (think I) read faster. It is much easier for me to remember where on the screen a certain passage was in case I have the desire to re-read at a later point in the text (say, because I am not sure if I understood correctly). Plus, for long texts it is much easier to jump to an earlier part of the text when it is still visible than to scroll back.

So I wouldn't flat-out refuse that Good may come of this. I don't see the application of multi-column text on a phone screen given its size but tablets seem to have reached sufficient size and resolution. Multi-column text still breaks the way I usually read on the web, but I feel it might be worth getting used to.

hawleyal• 12 years ago

Bad article title.

not_a_test_user• 12 years ago

That's very cool but I can't help thinking "Why would you want to do that?". Columns are awful to read on a webpage.

jeffehobbs• 12 years ago

Alt title: CSS One-Liners (That Only Work In Opera)

CSS One-Liners

Related Stories