Five Challenges of CSS Front-End Development

 

About Evgeniy

Evgeniy Polovniy has 10 years of experience in frontend development, and also works with Node.js on the backend. His biggest project since joining WebiNerds has been to develop a single-page application, powered by JavaScript, that copies the full functionality of a mobile app that is available for iOS and Android. Evgeniy occasionally provides in-house training here at WebiNerds, and recently gave a workshop about CSS. In this article we will focus on five topics that he presented in this latest workshop:

  1. CSS float property
  2. CSS position property
  3. CSS3 flexbox (or flexible boxes)
  4. Adaptive layouts
  5. Responsive CSS frameworks

In addition to offering his expertise on front-end development to colleagues at WebiNerds, Evgeniy has adapted some of his material into a GitHub-hosted book (in Russian). Portions of this GitHub book have been adapted for the present article.  

Introduction

Many developers think that they have done enough if something “works.” I think this is one of the biggest problems in our industry today. In my latest workshop I tried to point out some of the nuances of front-end development: to point out problems that we often encounter with CSS.

Let’s take flexbox, for example, introduced in CSS3. Unfortunately, many programmers working in front-end development don’t learn flexbox – or at least not thoroughly. Most significantly, you must know the differences between flexbox and float layout, not only in a general sense, but at a deeper level. It’s quite possible for developers to get some code working – in other words, everything looks fine on the screen, visually – without understanding what’s going on in the background as well as they should.

CSS has many nuances. Let’s take a look at five things, including flexbox and float, that you must pay particular attention to.

1. CSS Float Property

The CSS float property introduces a significant complication for the developer; floated elements don’t stay in the normal rendering flow. In other words, the position of floated elements is calculated differently from the position of other, non-floated elements. The default flow for HTML elements is linear. Elements are placed on the page from left to right, and then wrap to the next line when there is no more space. Elements that float escape this flow.

At this point we should pause to consider the term “rendering flow.” This term can be confusing. What does it really mean? When a website loads, our browser first downloads the Document Object Model (DOM) structure. Then, before rendering the page, the browser must find the blocks in the DOM that correspond with the CSS properties in the CSS file(s). The “flow” describes the order of operations for the browser’s rendering engine. The “flow” is how the browser decides where each element will be placed prior to rendering. Only after the browser does all this will the site be visually displayed on the screen.

Direction of flow with floated elements.

The direction of flow with floated elements.

The Challenge of CSS Float

At the moment when an HTML page is constructed, floated elements don’t sense other elements in the DOM (Document Object Model) other than text elements like <p> or <link>. This is because floated elements ‘float’ – on top of other elements – to the border of the parent element. Because of this, elements with the CSS float property don’t always behave the same way in all contexts. Specifically, a floated element may respond unexpectedly when next to non-text elements such as a block element (<div>, <h2>), inline block element (<span>), or when next to a <table>. They may respond unexpectedly because the display of float elements is dependent on the objects surrounding them, and floated elements don’t “see” non-text elements.

We could solve this problem by adding an element to the DOM between other elements:

<div style = "clear: both"> </ div>

But as we know, having empty and non-functional elements in the DOM is bad practice.

There is a simple solution to this problem, however. We can add a pseudo-class that aids the normal rendering flow. Once this pseudo-class has been added, elements can then sense each other. In short, the pseudo-class makes non-float elements respond to the positioning of float elements.

This is a more elegant solution. We simply add a separate class for elements that need clear. This CSS class eliminates the need for non-functional elements in the DOM:

.clearfix: after {
 content:; "."
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

2. CSS Position Property

position: static | relative | absolute | fixed | inherit;

The CSS position property is really quite simple at its core. We need to keep in mind, however, that absolute and fixed elements – like floated elements – don’t participate in the rendering flow. BUT relative and static positioned elements do stay in the rendering flow. For this reason, we need to be very conscious and vigilant about how we use the position property. Whenever we use it, we must understand the implications of what we’re doing.

One common mistake with the position property is to attempt to stretch position: absolute to the full width of the page:

div {
 position: absolute;
 left: 0; top: 0;
 width: 100%; height: 100%;
}

This works until you try to scroll down the page. Then, you realize that width, height, and position are calculated not based on the size of the document, but based on the size of the screen. This object with absolute positioning has fallen out of the flow.

It’s not that the flow causes us a specific problem, per se. But we need to be aware that absolute and fixed position elements escape the rendering flow.

3. Flexbox Property (Flexible Boxes)

Flexbox is newer than the float and position properties. It was designed to offer a different way to arrange elements – it’s based on a different way of thinking. Flexbox offers more positioning capabilities and ways to define relations between elements than do the float and position properties. This is because flexbox lets you position elements in relation to each other. This is significant. With float and position, elements are placed in relation to the page. With flexbox, elements are relative only to each other.

With flexbox, elements are relative to each other.

This opens up many exciting possibilities. For example, we can change the position of an element by changing its ordering purely in CSS. In this way elements can easily be moved or swapped around. The challenge with Flexbox is grasping HOW and WHY it works the way it does. It’s a new paradigm, and so requires a new way of thinking. For new developers just starting out, this might not be such a big deal. But for veteran developers, we need to learn to think the way flexbox does. Nowadays, this is a must-have skill for all developers.

The Challenges of Flexbox

Currently, the biggest challenge with Flexbox is not with its capabilities, but rather with browser support. Old browsers simply can’t handle it. Luckily, it’s really simple to figure out which browsers and browser versions do and don’t support Flexbox – just check out caniuse.com.

Because of issues with browser support (in older browsers), the ability to use flexbox in a project depends on a client’s needs. If a client absolutely wants support for older browsers, then flexbox is simply out of the question. On the other hand, if the client is happy to focus on supporting modern browsers, then I definitely use flexbox.

There’s also a really useful SASS mixin to ensure the best possible cross-browser support:

@mixin flexbox() {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
 }
 
 @mixin flex($values) {
   -webkit-box-flex: $values;
   -moz-box-flex:  $values;
   -webkit-flex:  $values;
   -ms-flex:  $values;
   flex:  $values;
 }
 
 @mixin order($val) {
   -webkit-box-ordinal-group: $val;  
   -moz-box-ordinal-group: $val;     
   -ms-flex-order: $val;     
   -webkit-order: $val;  
   order: $val;
 }
 
 .wrapper {
   @include flexbox();
 }
 
 .item {
   @include flex(1 200px);
   @include order(2);
 }

4. Adaptive vs. Responsive Layouts

Responsive layouts react to the size of the browser window they’re in, and automatically respond to re-sizing. For example, a responsive site will react when you resize the browser window on your desktop or notebook by dragging from the corner.

Adaptive layouts, on the other hand, offer site layouts that are entirely different across devices. In other words, the mobile version of a site can contain elements (and even functionality) that is not present on the desktop version. The version of a site that visitors see when on a tablet can also be entirely different from either mobile phone or desktop versions. Even for desktop, you can offer HD versions of the site or lower-res versions depending on the display that the site is being viewed on.

Nearly every modern website uses a mix of adaptive and responsive layouts. Take TechCrunch, for example:

TechCrunch uses both Responsive and Adaptive layouts.

Notice how “Featured Stories” is to the right of “Watch Now Crunch Report” when in a wide desktop window, but then drops below it when in a narrower window. This is “responsive.” However, there’s a lot more going on here. Pay attention to how the entire header transforms when the window is downsized. In the mobile-optimized version, we have only a hamburger menu, TechCrunch logo, and spaceship icon (that opens a drop-down of top stories):

Header for the mobile version of TechCrunch website.

On the desktop version of the site, we have an entirely different header:

Header for the desktop version of TechCrunch site.

Elements are not simply re-arranged to fit into the mobile-friendly version. What we’re seeing are two entirely different layouts: two entirely different versions of the website.

We can make adaptive layouts in CSS with the help of media properties:

@media [not|only] mediatype and (media feature) {
     CSS-Code;
 }

Media properties let us specify criteria that determines which version of the site is displayed. Most commonly, these criteria are screen resolution parameters. In some instances we may use DPI (Dots Per Inch, measuring the pixel density of a display) to determine what version to show. Additionally, we can use media properties to try to determine if a device is touch or non-touch. For detecting Apple products, stephen.io, maintained by Stephen Gilbert, is an especially useful resource. Stephen.io lists media queries for all Apple mobile devices, making it simple for you to target exact models of iPhone or (better yet) ALL iPad models with just one media query:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { /* STYLES GO HERE */}

The Challenge with Adaptive Design

The challenge with adaptive design is simply that many developers still don’t know how to do it properly, because they were never taught it. From the perspective of a client, this means that you should make sure that the developers at your web development company are experienced with adaptive layouts. It’s not as though this is an obscure technology. Actually, it’s an industry-wide trend. Virtually every new site is using adaptive design.

5. Responsive CSS Frameworks

Responsive CSS frameworks help developers to correctly orient elements by offering a grid system with 12 columns. Using a framework cuts down on the time that it takes for site development.

<div class="row">
   <div class="small-12 medium-6 large-3 column">...</div>
   <div class="small-12 medium-6 large-3 column">...</div>
   <div class="small-12 medium-6 large-3 column">...</div>
   <div class="small-12 medium-6 large-3 column">...</div>
 </div>

Creating a row with various widths for different display sizes in Foundation.

Complete frameworks, like Bootstrap and Foundation, are more than just a grid system. They also offer javascript plugins, CSS rules, and design elements. Recently I have been working almost exclusively with Foundation. This isn’t because Bootstrap is less capable, but rather because Bootstrap offers so many options for visual customization that we simply don’t need for our projects. Because of the additional functionality, Bootstrap is larger. Bootstrap is great, especially if you don’t have a designer on your team and you want all of the design elements that are built-in. However, I typically just need the functional elements of a CSS framework, not the design elements.

Though there are other frameworks out there, Bootstrap and Foundation can meet virtually 100% of development needs. And luckily, it’s rather easy to learn either of these frameworks. They are both well-documented, and have large communities of active users who can help out and answer questions.

CSS Frameworks are the future. If you’re not currently using one, then you should seriously consider getting on board!

Conclusions

This is an exciting time for CSS and front-end web development. With new(ish) tools like the flexbox property, and with CSS frameworks to aid our adaptive (and responsive) designs, it’s easier than ever to get sophisticated websites up and running.

If you have any questions or comments about CSS front-end development, then get in touch with the WebiNerds team on Facebook, Twitter or LinkedIn!

 

Related


Get In Touch

Name

Phone or Email

Message