Make the Web a More Colorful Place!
A guide to using new color spaces & formats with OddContrast
OddBird’s color tool not only checks contrast ratios, but supports the new CSS color formats and spaces.
Article
post type
Map-Set vs. Map-Merge
The difference between map-set and map-merge? Almost nothing.
When I first heard that Sass 3.3 had no map-set function, I was confused. Why force me to create a map, and then merge it? That sounds like two steps to accomplish one simple task! But that’s not the case. Map-merge is a much more powerful function, and using it to set a key in an existing map is quite straight-forward. In fact, I couldn’t come up with a map-set function that shaved off more than a few keystrokes. Here’s the comparison:
// a map!
$map: (
1: hello,
2: world,
);
// a map-set function (not included with Sass)
@function map-set($map, $key, $value) {
$new: (
$key: $value,
);
@return map-merge($map, $new);
}
// the difference between map-set and map-merge: almost nothing.
$merge: map-merge(
$map,
(
2: New York,
)
);
$set: map-set($map, 2, New York);Recent Articles
Article post typeUpdates to Popover and CSS Anchor Positioning Polyfills
hintpopovers,position-areaand moreWe have been busy updating the Popover and CSS Anchor Positioning Polyfills, but there is still more we can do with your help.
Article post typeNew Features for OddContrast
Display color gamut ranges and more
OddContrast, OddBird’s color format converter and contrast checker, gets new features – including the ability to swap background and foreground colors, and display color gamut ranges on the color sliders. Contrast ratios now incorporate foreground color alpha values.
