CSS Master

(Primo) #1

Perhapssurprisingly,theclip-pathpropertyisnotdefinedbytheCSSShapes
specification.Instead,it'soutlinedinCSSMaskingModuleLevel 15 .Chrome24+,
Safari7+andOpera15+supportthepropertywitha-webkit-vendorprefix.Firefox
alsosupportsclip-pathwitha`-moz-prefix,butdoesn'tsupportCSSshapes.


Despiteitsrelativelackofbrowsersupport,it'ssafetouseCSSShapesinprojects.
Justensurethatyoualsouseafallbackforbrowsersthatlacksupport.


Scroll Snap Points


Asthewebplatformgrows,ithasalsogainedfeaturesthatmimicnativeapplications.
OnesuchfeatureistheCSSScrollSnapPointsModule.^6 Scrollsnappointsletde-
velopersdefinethedistanceaninterfaceshouldscrollinoneinstance.Youmight
useittobuildslideshows(asinFigure10.4) or paged interfaces―features that
currently require JavaScript and expensive DOM operations.


Figure 10.4. Scroll Snap Points make for great touch-based slide shows

Here’sanexampleusingmarkupandCSSadaptedfromDavidStorey’spiece“Setting
native-likescrollingoffsetsinCSSwithScrollingSnapPoints”^7 :


(^5) ttp://www.w3.org/TR/css-masking/
(^6) http://drafts.csswg.org/css-snappoints/
(^7) http://generatedcontent.org/post/66817675443/setting-native-like-scrolling-offsets-in-css-with
Conclusion 357

Free download pdf