Figure 10.6. The effect of filter: blur(10px) grayscale(1)
IfwewantedtobluranimageandmakeitgrayscaleasinFigure10.6,wecanuse
thefollowingCSS:
img {
filter: blur(10px) grayscale(1);
}
FullsupportforfiltersareavailablewithoutaprefixinFirefox35+.Firefoxversions
3.6-34onlysupporttheurl()functionforfilters.Chrome18+,Opera15+,andSafari
6+alsosupportfilterswitha-webkit-prefix.MicrosoftEdgesupportsfilters,but
iswithoutsupportfortheurl()function.Filtereffectscanalsobeanimated,unlike
blendmodes.
Keepingtrackofallofthiscanbeoverwhelming.Justwhenyouthinkyou’reupto
dateoneverything,youfindanewspecthatyoudidn’tknowexisted,oranexisting
specchangesinasignificantway.Becausespecificationsandimplementationsare
ofteninflux,keepingupwithchangestoCSScanbequitetough,butitispossible.
How to Follow Changes and Additions to CSS
TheWorldWideWebConsortiummanagesalistofcurrentspecificationsandtheir
status.^10 Ifyoudon’tmindgettingintheweeds,theCSSWorkingGroupmailing
listisagreat—thoughoverwhelming—waytotrackdiscussionsandcontributeto
thedevelopmentofCSSspecifications.TheCSSWorkingGroupalsohasaTwitter
(^10) http://www.w3.org/Style/CSS/
Conclusion 361