Comments on Ten CSS One-Liners to Replace Native Apps

64 Reader Comments

Back to the Post
  1. That stuff looks promising. But how would I define a new paragraph to be placed on the next column?

    As far as I understand this, the text would just pour along all columns? But editors need to be able to determine where to end a column and where to start a new one.

    Copy & paste the code below to embed this comment.
  2. I have to admit I love the power inherent in such simplicity, especially being device agnostic. Definitely a good spec recommendation assuming it will behave consistently across browsers.

    Copy & paste the code below to embed this comment.
  3. Kudos for the final paragraph - a good argument pro multi-column web layouts.

    Copy & paste the code below to embed this comment.
  4. Still, for app-competitive implementations, devs should be able to style the transitions when switching paged-x pages.

    Copy & paste the code below to embed this comment.
  5. These techniques are really, really cool. I’m a tad skeptical about a “page-oriented web” being inherently superior or preferable, but maybe that’s because I’m young enough to have grown up with scrolling. I really dig the infinite canvas, especially when folks like Vox Media use it so beautifully. That said, yay for choices!

    Copy & paste the code below to embed this comment.
  6. This makes more sense to me than CSS regions and the like…
    I enjoyed reading your article on that too.

    Copy & paste the code below to embed this comment.
  7. I have a preference for the infinite canvas as the default assumption on the Web instead of a “page”, though I do see many use cases for a paged approach.

    How would some of these features work on an infinite canvas? Let’s say that I have a Web destination that is one screen wide and three screens tall on a device. Would this spec allow me to say that I want a pull quote to be placed on each screen?

    Copy & paste the code below to embed this comment.
  8. I like the idea, however I would like to see more flexibility in the positioning of images. Thinking especially of responsive images, I’d like to have an image span 1 column when there’s only 2 columns on-screen (e.g. mobile), 2 columns on an iPad, 4 columns on desktop - devices and widths as examples only.

    Do others see a use for this?

    Copy & paste the code below to embed this comment.
  9. @Peter I do see the use, but doesn’t placing the above figure-related rules into media queries achive that for you?

    Copy & paste the code below to embed this comment.
  10. @Håkon this looks a little limited compared to what is achievable right now with JS+CSS 3D transforms/transitions/animations. Couldn’t we get a pseudo selector to do things like
    .my-pagedx-content ::page {
      transition: all .3s;
    }
    .my-pagedx-content ::page:not(:visible) {
      transform: translate3d(/*whatever*/);
    }

    Copy & paste the code below to embed this comment.
  11. I’d like to clarify that Flipboard’s multi-column, magazine article layout has been web based ever since launch in 2010. While the surrounding app itself is native, the part that expresses article layout is rendered in a web view.

    Copy & paste the code below to embed this comment.
  12. While I agree, this is beautifully simple to implement these use-cases I am a bit disappointed about how specific this is. I am much more excited for CSS regions because it enables layouts like this but also solves so many other significant problems we face. These specs solve newspaper style layouts incredibly well but I doubt it will be able to make the leap to more complex magazine style layouts. When considering use cases outside of flowing text this becomes even more limiting. I don’t care for one-liners and would rather see more flexible properties that help us solve our own unique problems. At some point someone is going to want special styling on a column, or a column that breaks and starts again. This isn’t even going into the non-text based use cases for this, I can’t think of any while I can think of a few for regions.

    Copy & paste the code below to embed this comment.
  13. I’m happy to see that this is still being worked on, and I’m excited about being able to use these some time in the future. I’ve found that for text heavy articles, pagination is a lot better than scrolling text, especially on handheld devices.

    Copy & paste the code below to embed this comment.
  14. For wonks who want to keep up with the behind-the-scenes discussions, here’s the CSS Figures - intent to implement discussion: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/Tosujr59Akg

    Copy & paste the code below to embed this comment.
  15. Good lord! I nearly fell off my chair—I’m 99% sure I made that newspaper page. I’m a web developer now, and delighted to learn how to do it all over again.

    Copy & paste the code below to embed this comment.
  16. I can certainly see some of the CSS here being useful, but I disagree with the underlying premise that paged layouts are the way things should go. I think looking at the paged layouts of Flipboard, Facebook Paper, etc and saying; “Those are popular, they won, we need to follow their lead” is incorrect. It feels to early still. I don’t think we’ve explored the layout possibilities for these devices enough yet to say there is one true way to go. I’m not sure that we should even be trying to find “the one” way.

    @Håkon I’m just speculating based on my personal preference of scrolling layouts, but are you basing this on data about paged vs. scrolling?

    I think the CSS shown here would be useful without saying that paged layouts are the way the Web should go on mobile devices. Why limit ourselves?

    Copy & paste the code below to embed this comment.
  17. Nice article - thanks Håkon, it’s really good to add some new CSS knowledge to my repertoire!

    Copy & paste the code below to embed this comment.
  18. I would love to see this implemented! It is great for mobile, but also better for long-form reading on wider devices. This allows you to put a bunch of words on the screen read for a few minutes, swipe/click once and have a whole new page.

    Current scroll-based reading involves lots of wasted space in margins and larger text and leading to keep line-length readable, and then a lot of little scrolls, which can induce carpal tunnel. Even if you try to scroll once per “page” it is difficult to put the end of what you just read at the top of the screen.

    I grew up on scroll too, but sometimes pages just make more sense.

    Copy & paste the code below to embed this comment.
  19. Wow we went from web is not print to let’s make it identical to print in a few one liners… Down to killing scroll to make way for pages…

    Copy & paste the code below to embed this comment.
  20. Thanks for a solid introduction to this stuff Håkon. As a developer who’s proficient in CSS but also spends a lot of time writing JavaScript, I’m interested in how browsers will attempt to optimise repaints and reflows with such complex layouts, particularly with the deferred positioning and vertical float techniques that you mentioned.

    Will it be an ‘easy’ (I use that word too lightly, I know) adaptation of how they work with existing floats, or is it too soon to know?

    Copy & paste the code below to embed this comment.
  21. This is a really unique concept but it’s hard to imagine this working for more than a handful of use cases, and I don’t feel comfortable with the idea of using CSS to arbitrarily hide page elements the user has already gone through the trouble of loading along with the DOM based on their position in the document.

    Copy & paste the code below to embed this comment.
  22. Great intro, and examples for better layouts and the CSS that creates them. Consider putting an example image with each idea/code example. Much of the tutorial is below the fold where the image isn’t visible.

    Copy & paste the code below to embed this comment.
  23. Love the ideas, but I’m quite uncomfortable with the idea that ads should be listed first in the markup rather than being floated up somehow. This really doesn’t work in the resource limited mobile world, nor in the content scraping of pages (where we want the earliest content to matter, even in the presence of <aside>

    Copy & paste the code below to embed this comment.
  24. Beautiful article. A small demo with each suggestion would make this infinitely more useful, especially to demonstrate the excellent point you make in your last paragraph. My fear with columns is that they won’t render in one column on mobile. Thanks!

    Copy & paste the code below to embed this comment.
  25. Hasn’t the web moved away from paged interfaces in favor of so-called infinite scrolling?

    Even if this type of layout is in high demand, it seems the lack of control over placement of figures in relation to textual content would seriously limit the applications of this model. Floating figures to an arbitrary column or page when you have no way to guarantee what portion of your copy will accompany them is a far cry from the absolute precision of the printed page.

    Copy & paste the code below to embed this comment.
  26. This is really interesting and very easy to use. This pretty much covers how to replace a native app’s content positioning ability.

    Copy & paste the code below to embed this comment.
  27. It is interesting to know that we got competing properties in web equal to the native implementation. But it got a long way to grow and implement across web platforms.

    Copy & paste the code below to embed this comment.
  28. Håkon, thanks for writing this. Are there plans to allow percentages for column-width and column-gap in Multi-column Layout? The 2001 version of the working draft included them, and using percentages seems the most optimal to me for fine and durable control of responsive layouts.

    Copy & paste the code below to embed this comment.
  29. Great artcle. This is usually a print issue but will there be a way to handle widows/orphans without getting spacy paragraphs and balance problems? I could also see this being an issue with users defined font sizes.

    Copy & paste the code below to embed this comment.
  30. @Håkon Wium Lie

    I think this all solves a very specific problem very well. I used to work at Treesaver where we implemented something nearly identical to this. But what if I want to vertically center a figure within a column? What if I want that figure to float half-way into two columns? What if I want another piece of content like an aside or ad between two vertical fragments? What if I want a figure to hang outside the column box? I have been following this spec with lots of excitement over the years and am excited to see some of the fragment stuff here. More recently I get really excited about regions because it just handles overflowing content and leaves layout to flexbox, grid layout, or classic floats giving me control over whatever edge-case I might run into. Are there any use cases for columns outside of formatting articles?

    I like this spec and I always like to see more cool features in CSS but by writing a scathing article on regions and then one promoting a spec that handles one of the use cases for regions well I felt I had to speak up. It seems as if you are trying to offer an alternative for regions with this article but failed to provide solutions to a few of my issues with article layout and all of my layout issues regarding navigation and module flow that regions solves. Ultimately I would like both columns and regions as they solve slightly different problems, but if I were to pick one it would be regions every time.

    Copy & paste the code below to embed this comment.
  31. Just being able to float elements vertically will be incredibly powerful. With the added control it is going to be a renaissance for good old float. :)

    Copy & paste the code below to embed this comment.
  32. @Håkon Wium Lie

    Thanks for the responses. I have more thoughts but comments are probably not the right format.

    Copy & paste the code below to embed this comment.
  33. @Håkon Wium Lie

    Thanks for the great article! I’ve been eagerly watching the development of flexbox, columns, figures and shapes to complement what I’ve already spent a lot of time on: using web fonts well (performance, proportion, OpenType) in the context of responsive design. What I think is important however is to not ignore the context of figures in relation to the content itself. While I agree some flexibility is great in fitting a figure to a place in the layout, sometimes it’s important that it stay closer to the content to which it’s related. That can complicate the placement of these elements within the structure of the content itself. (though for ad placement I think it’s brilliant)

    One interesting tweak that would work equally well in vertical scrolling layouts (like on a phone) would be deferring by percentage of the content itself: so rather than deferring by columns on a larger layout breakpoint (like a tablet) you might defer ads by percentage of the whole content (so they would be roughly spaced x% of the way through the article as you scroll downward through it)

    Cheers,

    Jason

    Copy & paste the code below to embed this comment.
  34. @Håkon Wium Lie

    It was back in, ooh, 2004/5? We were the last title in the building, which also housed two bigger newspapers, to work on Quark Xpress running on Macs. I’d arrived a few months earlier as the chief sub-editor at the Bristol Observer and set about getting the team trained up on thinking more rigorously about how they laid stuff out, and using some basic maths instead of the mark one eyeball to get it done. We needed to be able to push out a lot of neat-looking pages very quickly, so one of the first things I did was to introduce a strict horizontal and vertical grid to give us some structure. I wonder if having everything locked to the baseline grid might be what (subconsciously) caught your eye?

    As you might imagine, I get on really well with CSS :)

    And I’m absolutely delighted that you’re using this article in your talks and demonstrations; it’s a professional compliment of the highest order!

    Copy & paste the code below to embed this comment.
  35. @Brandon Gano Infinite scrolling seems to me to have one very large issue; people don’t scroll infinitely.

    It seems to me content, regardless of the medium of presentation,  should have context. With infinite scrolling you’re breaking or modifying the context of your content to suit the presentation method. Paged results means there are finite and knowable expectations for your audience, natural places for them to break off and disengage. Without those, you’re depending on their attention span and available time. I’d be much less likely to abandon a 7 page article at page 5 (I’m almost done) than after 5 pages of an unknown quantity.

    If your content truly is infinite (or close enough to pass), then I think there’s a discoverability issue that a scrollbar isn’t well equipped to handle.

    Copy & paste the code below to embed this comment.
  36. What’s the support of “float: top”?

    Copy & paste the code below to embed this comment.
  37. @Håkon Wium Lie
    Great article Håkon! You made one statement that left me scratching my head:

    “Likewise, I think ads will be less intrusive in paged, rather than scrolled, media.”

    I’ve read various sports related articles that force visitors to click through 16 pages to read an entire article. Often times, the advertisements are on every fifth page or so and they take up the whole page. The ads in this paged scenario are much more intrusive to me! This is also a really bad use of pagination in my opinion.

    Can you elaborate on your belief that ads will be less intrusive in paged media?

    Copy & paste the code below to embed this comment.
  38. I love these CSS tricks and will definitely play with them next time I work on our internal newsletter. However I do have some questions about the deferring and pullquote techniques.

    How will assistive technology devices such as screen readers interpret the code? Typically, they read from the document and ignore the presentation layer. Using the examples above, does this mean a screen reader would be front loaded with all of the ads and pullquotes?

    And when a user tabs on their keyboard through a document, will they have to go through all of the ads first? Should developers include links to skip each of these?

    Copy & paste the code below to embed this comment.
  39. Hi Håkon,
    This is all great and I already have several use cases where I would use all these properties. Unfortunately, the columns property alone shows some severe problems even with the most basic setup:

    if a column breaks between ‘p’, you may end up with the margin-bottom of the ‘p’ at the top of the next column (ugly).
    If a column breaks after a heading, you got the ‘h’ at the bottom and the related text at the top of the next column (confusing).
    Images in the flow may be sliced and spread across columns.
    Getting a two columns layout vertically balanced is a chance game.

    Those are the first things that pops when I remember my trials.
    Can we expect improvements on this side?
    And how? More sophisticated UA rendering? More css properties?

    Thanks for this great article.

    Copy & paste the code below to embed this comment.
  40. For someone who knows only the basics of CSS, this was a great read. As others have commented, having such power in such simple statements is fantastic, and the flexibility across devices and browsers is surely what the web needs to move towards. A great read, thank you!

    Copy & paste the code below to embed this comment.
  41. Sorry, commenting is closed on this article.