Web Development Interview Questions For Legacy Tech

Clearing Floats

One way to clear floats is the clear fix hack.

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

This way is probably more convenient for larger projects where needed.

If you know where you will always need a float you can clear a float this way:

clear: both; //left, right, or when needed

What are floats?

Floats can be used to wrap text around images and reflow an image based on the text size. You can also make the entire website with floats, although there are better alternatives like flexbox and CSS grid.

Why use img srcset?

You can use srcset with an img tag so you can have responsive images.

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px, 800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Responsive images

How do you serve your pages for feature-constrained browsers?

One of the simplest ways is to use libraries such as Modernizr.

Modernizr: the feature detection library for HTML5/CSS3

You can also just build for older browsers so you will always have a browser capable.

To fix browser-specific styling issues you can reset CSS.