The CSS language is stuffed with small gaps that are irritating to navigate. Between CSS properties to cover a container and its contents, there may be nonetheless room for enchancment. visibility: hidden retains peak and width integrity whereas show: none on a container hides all the pieces. You should use .container > * to cover all contents of a container, however what if there was a greater approach?
There’s a higher strategy to cover the contents of a component whereas respecting the container’s border and dimensions. That higher approach is utilizing the content-visibility property:
.my-container.contents-loading {
content-visibility: hidden;
}
A demo of such performance:
See the Pen Untitled by David Walsh (@darkwing) on CodePen.
Avoiding a .container > * selector by utilizing content-visibility: hidden is a lot nicer from a upkeep perspective!
Create a CSS Flipping Animation
CSS animations are a number of enjoyable; the fantastic thing about them is that by way of many easy properties, you possibly can create something from a chic fade in to a WTF-Pixar-would-be-proud impact. One CSS impact someplace in between is the CSS flip impact, whereby there’s…
iPhone Checkboxes Utilizing MooTools
One of many candy consumer interface enhancements offered by Apple’s iPhone is their checkbox-slider performance. Thomas Reynolds just lately launched a jQuery plugin that lets you make your checkboxes appear like iPhone sliders. Here is implement that performance utilizing the beloved…
CSS @helps
Characteristic detection through JavaScript is a shopper facet finest observe and for all the proper causes, however sadly that very same performance hasn’t been accessible inside CSS. What we find yourself doing is repeating the identical properties a number of occasions with every browser prefix. Yuck. One other factor we…