Hey guys, it’s been a very long time since I’ve touched HTML/CSS but I’m moving back in that direction. I need to build an online portfolio, and was wondering which method is more usable in December 2016. For instance, would a grid layout even hold up across browsers? Should I rely on the old float and absolute positioning techniques from years ago? What say you?
CSS grids are not mature yet. No, they would not hold up cross-browser.
In some cases floats have been supplanted by table/table-cell techniques.
In appropriate doses, flexbox is amazing but not adequately supported prior to Edge.
Otherwise, just as before, the best techniques to use depend on your content and what you want it to do.
No. Absolute positioning should not play any major part in layout. It’s something to be used sparingly in edge cases. Floats have their uses, but again not a major layout tool today, there are better methods.
I think support for flexbox is good enough to use in production with appropriate fall backs.
I would leave grid for now, but they say it’s in the pipeline. Even when enabled in browsers through flags, results are inconsistent across browsers.
Here’s my view.
It depends on the kind of audience you’re targeting with your portfolio. Although your content should be accessible to all browsers, it’s not the case that it needs to look the same in all browsers.
If your audience is likely to visit your portfolio site using the latest major browsers, you can safely optimize your code with those browsers in mind, while making sure other visitors can still have a decent web experience. Support for flexbox looks pretty good at the moment, so you can experiment with that for your layout. For cross-browser issues, the Flexbugs project on GitHub can be helpful.
Once your site is up and running, keep a watchful eye on your website’s analytics to check which devices your visitors actually use to access your website and optimize your code accordingly.
I would definitely go with Flexbox for a portfolio. It is fully supported by all modern browsers.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.