Disabling Scroll Anchoring with CSS
Scroll anchoring is a new technique implemented in browsers that prevents content jumping. This behavior can be controlled with the CSS overflow-anchor property.
Controlling Whether Mouse & Touch Allowed with CSS pointer-events Property
The CSS pointer-events property can control whether an element can be a target for pointer (mouse & touch) events.
Changing Cursor Color for Textboxes with CSS caret-color Property
The CSS caret-color property changes the color of the caret, or the blinking cursor for text inputs fields. Changing the color of the cursor when the user focuses on the text field makes it more noticeable.
Setting Tab Sizes in HTML with CSS tab-size Property
Setting width for the Tab key can change the look for textboxes and 〈pre〉 element. This can be done with the tab-size CSS property.
How to Justify Text using text-align & text-justify CSS Properties
In a webpage, justification of text can be done with the text-align property. Spaces can further be adjusted with text-justify property.
Adding Hyphens to Text with the CSS hyphens Property
It is a common practice to break lines by introducing a hyphen character between a word. In web pages this is done with the CSS hyphens property.
Indent Text with CSS text-indent Property
Many times you would like to leave empty spaces before the starting line of a paragraph. This can be done with the text-indent CSS property which defines the length of the white space appearing before the first line.
Golden Rules for Typography on the Web (VIDEO)
Good typography does not improve speed or understanding, but leads to greater engagement in reading. This video presented at CSS Day brings out some general guidelines for typography on websites.
Maintaining Aspect Ratios for HTML Videos with CSS
When rendering an image browers maintains its aspect ratio. But this does not happen in this case of video element. This can be done with a bit of CSS.
Setting Spaces between Letters with CSS letter-spacing Property
The letter-spacing CSS property can be used to set spacing between individual characters or letters in words.
Smooth Scrolling with CSS
For modern browsers it is now possible to set smooth scrolling for a webpage with the CSS "scroll-behavior" property. No Javascript is required for smooth scrolling.
Managing Spacing Between Words with CSS word-spacing Property
The CSS word-spacing property defines the width of white space between words in a block of text.
Styling First-Letters with CSS ::first-letter
Styling first letter in a block of text is a good way of increasing user attention span. It can be done with the ::first-letter CSS pseudo-element.
Creating Attractive First Lines with CSS ::first-line
When your copy content goes long, it is a good idea to make it visually attractive. The CSS pseudo-element ::first-line can be used to style the first line appearing within an element.
Selecting Sibling Elements with CSS
CSS provides the adjacent sibling combinator (+ character) and general sibling combinator (~ character), to select siblings of an element.
Selecting Child Elements with CSS
The child combinator represented by the greater-than character (>) select direct children of the parent element. The descendant combinator represented by a single-space character can be used to select children, grand-children, grand-grand-children also.
CSS :focus-within
The :focus-within CSS pseudo-class is a selector for an element that contains a focused element as a child. It is the only CSS selector that reaches a parent from a child.
Cropping and Resizing Images in CSS using object-fit and object-position
Images can be cropped and resized in CSS using the new object-fit and object-position properties. They are similar to background-size and background-position properties, but can be applied directly to image elements.
Using WebP Images with Fallback
If your application involves showing a lot of images then probably it makes sense to add WebP support. Using the HTML tag is the most robust solution to display WebP images with fallback.
Detecting when an Element Becomes Fixed in CSS position:sticky with an Intersection Observer
Creating an element which would become fixed during scrolling has become very easy with CSS position : sticky. And with the new Intersection Observer API, it can be detected when an element comes in/out of sticky position.