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 >
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!)
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.
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
fadeOut so accomplishing this so eloquently in CSS was a big win!
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.
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
"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! :)