Simple, yet powerful CSS properties – box-sizing, counters, scroll snap and pointer events

CSS cannot be avoided if you want to create an effective and engaging user experience. It is a powerful language which has an easy learning curve, but difficult to master. There are a lot of quirky things that you can do with CSS. Lets see few powerful css properties today – box-sizing, counters, scroll snap and pointer events.

box-sizing

Ever sat down to debug how the width is calculated for the elements? Do you know that the box-model can be customized? 

This is one of the mighty, yet an unsung property in CSS. It basically states how the height and width of the element is calculated.

• content-box Default value. States that the width specified, is the width of the content. If the element has width: 100px, then the content is 100px wide, the padding or border are not accounted in the 100px. They are added to the final width.
• border-box States that the width specified is accounted for any border and padding along with the content. If the element has width: 100px, it will include any border and padding if present.

See the Pen
Box sizing by mahalakshmi K (@MahaKabilan)
on CodePen.

Scroll snap

Want to do that snapping like its done on the app? 

Scroll Snap specification helps to create snaps at some points when the user is scrolling. The most used properties are scroll-snap-type and scroll-snap-align.

• scroll-snap-type – set this on the container to state the type and direction of scrolling. values – { x|y  mandatory|proximity}
• scroll-snap-align – set this on child elements to state the order it will snap to. values – {start|center|end}

See the Pen
Scroll-snap-type “Mandatory” vs “Proximity” by Max Kohler (@maxakohler)
on CodePen.

See the Pen
Horizontal Full-Screen by Chris Coyier (@chriscoyier)
on CodePen.

counters

Writing a documentation online with lot of headings or sub-headings? Lets number them without any JS!

The CSS counters can automatically number the headings in a page. These are CSS variables that can be manipulated by rules.

counter-reset– to initialize the counter

counter-increment – to increment or decrement the value of the counter

See the Pen
Multilevel counter in css by mahalakshmi K (@MahaKabilan)
on CodePen.

See the Pen
Timeline CSS with Counters by Jonathan Snook (@snookca)
on CodePen.

pointer-events

Ever wanted to control user clicks or SVG interaction with CSS?

This property allows you to state how HTML elements respond to user events. This should be basically used over SVG interactions and beware of using them for disabling elements as there are better alternatives for the latter.

• none prevents all cursor options on the element
• auto default
• inherit | initial| unset
• Various properties for SVGs

See the Pen
Visible vs painted in SVG by Tiffany Brown (@webinista)
on CodePen.