As web designers, we are often encouraged to utilize the latest and greatest features that CSS has to offer. And there are plenty of compelling reasons to do so. Techniques like CSS Grid and Flexbox make quick work of common layouts, while CSS animations add movement and interactivity. That’s just the tip of the iceberg.
However, implementing these features can sometimes come at the cost of browser compatibility. For websites that still have a significant number of users with older browsers, or for features that are very new, there’s a risk in leaving some people out.
Philosophically speaking, some designers are fine with this – and that’s OK. But implementing fallbacks for these features may be easier than you think. These failsafe measures offer a reasonable facsimile of a particular layout or design element and are compatible with legacy web browsers.
Today, we’ll show you how to utilize the Modernizr feature detection library for this purpose. Here we go!
Modernizr is one of those handy tools that web designers have been relying on for years. It’s a library that can be customized to “detect” (in reality, it’s running tests) specific features as a web page loads. From there, it adds CSS classes to the page’s <HTML> element, allowing designers to target their code based on what the library finds.
In our case, we’ll be using it to detect CSS Flexbox. However, it’s also able to look for features related to HTML and JavaScript. For instance, you can use it to determine whether a browser supports HTML5. If not, the available HTML5 shiv script can be used to bring it up to code, so-to-speak.
What’s really nice is that you can customize Modernizr to meet the needs of your project. Their website’s UI will let you pick and choose only the items you want detect. Once you’ve made your selections, click on the “Build” button to generate a custom downloadable package.
For our purposes (and to keep things simple), we’re building our Modernizr package to detect Flexbox. We’ll also choose to minify the code and add CSS classes as well.
To demonstrate how this all works will require a couple of files – both available on GitHub:
.no-flexbox classes that use old school CSS floats as well. This will help us create a similar layout style in legacy browsers.Next, we’ll want to create a new HTML document that calls both of the above files in the <head> area. In addition, the document will need an example CSS Flexbox layout and some content.
You can feel free to use the demo file below for experimentation. It contains a simple 3-column layout, along with some minor visual enhancements (more on that in a bit).
Now it’s time to see how our demo looks in a browser. To start, let’s use a modern web browser that supports Flexbox.
At least, we suspect that it supports Flexbox. How can we tell for sure? That’s what Modernizr is here to do.
In our case, we’ll want to look at our demo page’s source, specifically the <HTML> element. If there is a class of flexbox added to the element, we know our browser supports the feature. Go ahead and view the page source in your browser – we’ll wait.
If you tried to view the full source of the page, you may have noticed that the <HTML> element doesn’t contain a class. Don’t worry – this is normal.
That’s because the class is added at runtime, after Modernizr tests for the selected feature. Therefore, it won’t show up in the full source code.
Instead, open up your web browser’s developer tools (hit the F12 button on your keyboard). That will provide an accurate look at the <HTML> element.
Here, we’re using the latest version of Firefox Developer Edition. According to Modernizr, it supports CSS Flexbox. Yay!
Everything’s looking pretty great in our modern browser. But how about legacy software?
Our styles are set to use CSS floats in browsers that don’t support Flexbox. That fallback should allow us to create a multicolumn layout, even on ancient setups.
According to Can I use, Flexbox has partial support as far back as Internet Explorer 10, Firefox 2, Chrome 4 and Safari 3.1. Many years have gone by since these browsers were in wide use. However, IE in particular is still hanging on here and there.
Modernizr can be configured to test for partial support – but it gets messy. It leads to writing more CSS fallbacks that take a number of different situations into account. It’s not very efficient. Therefore, we’re looking for all-or-nothing support in our tests.
Let’s take a look at our demo in IE 10 (via a browser testing service) and see what happens.
Not too shabby. Our third column gets pushed down to the next row, which can be tweaked. But what about Flexbox support?
A quick view of IE’s developer tools shows that our <HTML> element displays a class of no-flexbox. That means Flexbox is not supported here, and the CSS fallback is being utilized.
Our fallback CSS floats will not cooperate with the visual enhancements we made. The third column is pushed down to a second row, which doesn’t look very nice.
That’s because floats add padding and borders to the column width that we previously set in the stylesheet. Flexbox, on the other hand, can adjust to these items without adding to the overall column width. Hence the difference in the results.
There are a few different things we could do to rectify the situation. We might cut the width of the columns or even shrink the margin between columns. Let’s try cutting the column width from 30.66% to 28.66%.
It worked! Our columns are now happily displayed and reasonably similar to the Flexbox versions. Some spacing differences aside, this is at least usable within an old browser. We could go in and make further changes to get even closer to the original.
While our demonstration focused on detecting CSS Flexbox, Modernizr can do so much more. It can look for other common features such as HTML Canvas, SVG support, CSS Grid and an array of other useful tidbits.
The idea is that, once you know what a user’s browser is capable of, you can adjust your code to follow suit. This makes adopting newer CSS specifications, for example, a much less worrisome process.
Perhaps you won’t need to use fallbacks in every instance. But it’s nice to know that implementing them is easy to do, with the help of Modernizr.
The post How Modernizr Can Help You Implement CSS Fallbacks appeared first on Speckyboy Design Magazine.
This way of iterating improves WordPress and ties back to one of my favorite open-source principles. The idea that with many eyes, all bugs are shallow. To me, that means that with enough people looking at a problem, someone is bound to be able to see the solution.
These words from Josepha Haden Chomphosy on the How WordPress Improves episode of the WP Briefing Podcast point to the factors that differentiate building software in an open-source environment. Our updates this month are closely tied to the philosophy behind those core principles of open source software.
WordPress version 5.7 “Esperanza,” came out on March 9. The release offers fresher admin colors, several improvements to the block editor, single-click HTTP to HTTPS migration, and a new Robots API. Read more about it in the release post, the field guide, and the talking points post for meetup groups. The Core Team has also started work on WordPress 5.8 pre-planning.
Want to contribute to WordPress 5.8? Join the WordPress #core channel in the Make WordPress Slack and follow the Core Team blog. The Core Team hosts weekly chats on Wednesdays at 5 AM and 8 PM UTC.
Contributor teams released Gutenberg Version 10.1 on March 3 and Version 10.2 on March 17.
Version 10.1 showcases significant improvements to reusable blocks, a clearer image toolbar, and spatial options for the social media block. Version 10.2 offers block pattern options to display contents from the query block and removes writing prompts from empty paragraphs in the editor. It also adds width adjustment for spacer blocks in horizontal parent blocks and the ability to transform media and text blocks into columns.
Want to get involved in building Gutenberg? Follow the Core Team blog, contribute to Gutenberg on GitHub, and join the #core-editor channel in the Make WordPress Slack. The “What’s next in Gutenberg” post offers more details on the latest updates. Don’t miss the monthly Gutenberg tutorial on How to make block patterns!
March saw a plethora of updates to the Full Site Editing project!
A proposal has been kicked off on building a project-wide WordPress contributor handbook. The handbook will have content around the WordPress project’s underlying philosophies and commitments, along with shared expectations on working together and building products. It will also contain modern open source best practices for WordPress.
Have a story that we should include in the next “Month in WordPress” post? Please submit it using this form.
Distributed Letters Animation Layout – Learn how to craft a stunning animation on a triple panel layout.
Want to Write a Hover Effect With Inline CSS? Use CSS Variables. – An example of how CSS variables can make inline hover styles a reality.
Waking Up the Taste Buds of Your Design Clients – How to surprise your clients with bold new design combinations.
Cookie Consent Speed.Run – Test your cookie knowledge while wading through a tricky UI.
The End of AMP – Google will no longer give preference to websites using AMP. Here’s why that’s a good thing.
The Component Gallery – Gain inspiration from this up-to-date repository of interface components based on examples from the world of design systems.
8 Common Website Layouts Built with CSS Grid – Examples of how CSS Grid can help you easily craft common web layouts.
A Complete Guide To Accessible Front-End Components – A resource for reliable accessible components: from tabs and tables to toggles and tooltips.
Why skip-links are important for accessibility – A look at why skip-links play an important role in making a website accessible for everybody.
transition.css – A library of CSS transition styles that add compelling animation to your projects.
Are Google’s Core Web Vitals Metrics Unreasonable? – Here’s what Google’s new performance metrics mean to small and lower budget websites.
Reforms.js – Generate forms and cards with this Vue 3 and Bootstrap 5 library.
Theme Studio for VS Code – Use this tool to easily create and deploy your very own custom VS Code themes.
Noise & Gradient – A tool for generating a trendy textured gradient background.
Fontshare – Use this resource to download 100% free high-quality fonts.
The post Weekly News for Designers № 586 appeared first on Speckyboy Design Magazine.
One can never have too many Photoshop brushes. After all, a Photoshop brush is a versatile tool that can help you create a work of art or add those few missing finishing touches to your design. Not to mention, Photoshop brushes help you save time as you don’t have to recreate a certain effect or design from scratch.
While you can create Photoshop brushes yourself easily, there is little point in reinventing the wheel. That’s where premade Photoshop brushes come in handy. Given Photoshop’s popularity, chances are that the brush you need to complete your project has already been created by someone else and generously shared it with the design community.
Take, for instance, swirl and ribbon brushes. These Photoshop brushes are perfect for celebratory designs as well as any design geared towards a female audience or where a certain elegance is required. If you’re working on such a project, you’re in luck.
In this post, we’ve gathered the best high-quality swirl and ribbon Photoshop brushes. They will be the perfect asset for your creative library as you can use them to create stunning birthday cards, wedding invitations, event flyers, posters, and more. You can also use them to create decorative frames or add swirly lights to your designs. The best part is that they are completely free to download so you won’t break the bank by downloading them.
Check out the full collection below, download as many of these brushes as you want, and start using them in your design projects today.
The post 25 High-Quality Free Swirl & Ribbon Photoshop Brushes appeared first on Speckyboy Design Magazine.