Over the past 12 years of being a frontend web developer, I've really watched CSS grow up. I'd like to demonstrate a few things modern CSS can do that used to be dreams/only possible if you used jQuery ;)
You can play with all the techniques described in this CodePen:
View fullsize >
Scroll Snap (aka Carousels/Slideshows)
I have a fraught history with making carousels, spanning a myriad of jQuery plugins and my own attempts at custom solutions.
In the CodePen demo, the scrollsnapping demo is defaulted to apply along the X-axis, so it requires a horizontal scroll to be triggered. It's also set to the mandatory value which means as soon as you begin to scroll, the next slide will "snap" into view.
To view the alternative Y-axis scroll-snap as well as the proximity behavior, pop open the CSS editor and uncomment where indicated by the Snap on Y-axis comment, and then comment out the Snap on X-axis. Then the demo will scroll vertically, and with the proximity behavior set the snapping will not occur until you've crossed a midway(ish) point of the slide.
Note: This is not a technique to use carelessly, particularly due to accessibility concerns especially if your slides contain interactive content. For production use, you'll likely want to add some kind of navigation (see this example with some more features to consider) and perform additional testing on the experience for someone who navigates via tabbing. (If anyone has come across a resource on scroll-snap and accessibility, please drop it in the comments!)
CSS Grid and Overlapping Layouts
Grid is less familiar to me than flexbox, however, for layouts "outside the box" it is the superior tool. This demo illustrates creating a 12-column / 12-row grid and specifically assigning the grid items to a location.
Source order takes care of the second image overlapping the first, and we just needed to define z-index: 1 on the p to ensure it appears above the images.
In the past, this wizardry would require absolute positioning or negative margins, a headache from managing z-index, and very manual adjustments if you wanted to even begin making it responsive. Now, combined with viewport units and assigning columns using the specialty grid unit of fr, this layout is responsive without losing the essence of the design. I only added one very minor media query to bump up the second image at smaller viewports.
Check out everything from Jen Simmons to help you learn grid, as well as the "Complete Guide to Grid" by CSSTricks.
Animation With Just 2 Lines of CSS
The third demo is of some common animation techniques that are now possible by combining a transition property with a transform property. I think the jQuery code I have written most in my life was fadeIn and fadeOut so accomplishing this so eloquently in CSS was a big win!
Equal Height Content Boxes
In approximately 2013, I wrote a jQuery plugin that would ensure a row with three columns would keep the content boxes equal height no matter the length of the content they contained. So this may not seem like a big deal - but it's kind of a really big deal for the browser to handle this logic natively.
Both flexbox and grid enable this behavior simply by defining them as the display property. The demo adds a bit of extra style to enable spacing between columns and define column width, and defaults to grid. The commented out code will allow you to flip to flexbox.
Flexbox Albatross For Container Queries
Credit for the discovery and naming of this technique goes to Haydon Pickering.
On first glance (depending on the size you view the demo) this may appear to be nearly the same as the equal height demo. But this one comes with inherent magic that results in the closest we currently have to container queries.
You may have to view the demo fullsize to allow resizing the viewport to witness the effect. What will happen is that as the width of the columns begins to squeeze below 40em according to the flexbox rendering algorithm, the columns will then become stacked and fullwidth.
Two rules are triggering this:
flex-grow: 1;
flex-basis: calc((40rem - 100%) * 999);
flex-grow: 1 ensures that the content takes as much space as the algorithm will allow it - so when this is the same for all columns, they all take equal space if there is enough room for them all. The flex-basis rule performs some math magic with the CSS property calc that essentially leads to the element either being 40rem or 100%.
"Ok, cool... so what?" says you, on a widescreen desktop. Well, pop open the CSS editor and uncomment the width: 60vw declaration then try resizing your window. Notice that the reflow of the columns is triggered due to the column container getting narrower, versus being related to the viewport. If we tried to do this with a media query, we could only rely on the viewport width.
For an additional hint at how this can be useful, also uncomment the lines below Set 3rd item to a higher breakpoint and then resize. The third column will then drop sooner than the other two, and then ultimately they will all stack as before.
If you learned something new or have cool demos of these techniques to share, drop a comment! :)
Top comments (0)