The Latest

THE LATEST

THE LATEST THINKING

THE LATEST THINKING

The opinions of THE LATEST’s guest contributors are their own.

Reducing Javascript usage for CSS Positioning

Gloria Ukaoma

Posted on February 28, 2021 19:07

2 users

JS is a versatile tool for creating visual effects on your website. Even so, CS has a toolset of its own for positioning and sizing multiple elements.

Like any coding language, HTML and CSS are continually updating with new features. These features make designing and implementing websites easier. Flexbox and Grid Layout alone have shot down a need for using float and other hacks while positioning elements. So as we continue to receive more browser support for the newest iterations, front-end developers should reassess their use of Javascript for positioning.

Will Flexbox kill Masonry.js? Not anytime soon, but the potential is obvious. Using a flexbox allows for dynamic and responsive positioning of elements in a container. This is perfect for showing products on a shop site or posts on a blog. Because of the flex-wrap property, any elements that don't fit on a line can be wrapped around to a new line. This ensures comfortable viewing on most screen sizes (assuming the container width is determined by viewport size). All this with no need for scripts or external frameworks. And for the cherry on top, Flexbox plays nice with jQuery filtering.

However, there are some limitations to the flex-direction property, so developers are not yet able to produce the infamous masonry effect in CSS alone. For those unfamiliar, masonry is a visual design choice where page elements of different sizes have equal margins between them, similar to how a stonemason lays the bricks of a house. This look is notoriously difficult to achieve using pure CSS, so JS has to step in to help.

Grid Layout is a newer staple in the CSS positioning world. Similar to Flexbox, it helps with positioning multiple elements in the same container. The big difference between the two is that Grid is catered toward design choices where columns and rows need to be defined explicitly. In Flexbox, the rows are determined by the height of the elements in the row, but in Grid Layout, you can define those measures. In addition, CSS Grid allows for elements that span multiple rows and columns. As a result, you can ensure important elements stand out, no matter the screen size. And of course, all of this is available without using any Javascript.

Browser support for the current iterations of Flexbox and Grid Layout is pretty average. Vendor prefixes are still necessary to ensure your website displays properly in all browsers. In my opinion, that is a tiny price to pay for the enormous freedom that comes with these properties. It is much better than bogging down your website with layers of jQuery for an effect that can be achieved with a bit of Grid tinkering. However, masonry still eludes a CSS solution, so we must continue to rely on good ol' Masonry.js. Hopefully that will change one day. Until then, I wish your website a speedy load time.

Gloria Ukaoma

Posted on February 28, 2021 19:07

Comments

comments powered by Disqus
Source: Latest news

The Web Development Master Class Certification Bundle features six courses on languages such as JavaScript, PHP, HTML, and...

THE LATEST THINKING

Video Site Tour

The Latest
The Latest

Subscribe to THE LATEST Newsletter.

The Latest
The Latest

Share this TLT through...

The Latest