Blow are some quick scribble notes after skimming through Flavio Copes’s CSS Handbook, 2025 edition:

CSS Function: clamp()

By using the clamp(minimum, preferred, maximum) function, you can clamp a value within a range specified by min and max provided:

2025-09-17T151845

(Example can be found at: index-clamp.html)

You can also use clamp to specify font-size in certain range using, you can generate this using this tool: Font-size Clamp Generator - Generate linearly scale font-size with clamp()

2025-09-17T152247

CSS Property: border-width keyword

By default the border-width is medium, and default border-color is black, see below example of div after just applying border-style:solid:

2025-09-17T152712

And instead of positive numerical values such as 10px, you can put in named values: thin, medium, thick, as shown below:

2025-09-17T153054

CSS Property: box-sizing

It is recommended to always use “box-sizing:border-box”, in fact many CSS reset / normalise libraries, for instance tailwind’s reset, to include the following:

1
2
3
4
5

*,
::before,
::after {
	box-sizing: border-box;
}

(*quick illustration to let you differentiate the “border-box” and “content-box”

2025-09-17T153837

CSS Property: clip-path

You can use the clip-path to create a “masked” clipping region to create some very interesting effect:

2025-09-17T154702

You may use one of these tools to create your clip-path:

You can find the above examples in CodePen:

CSS Modern Unit: Container Query Unit

According to MDN’s documentation:

  • cqw: 1% of a query container’s width
  • cqh: 1% of a query container’s height
  • cqi: 1% of a query container’s inline size
  • cqb: 1% of a query container’s block size
  • cqmin: The smaller value of cqw, cqh, cqi, cqb
  • cqmax: The larger value of cqw, cqh, cqi, cqb

(*In most cases, that is in horizontal writing mode, cqi is equivalent to cqw (and cqb is equivalent to cqh), but be careful when you are dealing with language that could writes in vertical such as Chinese and Japanese.

They can be handy when you work with container query, when you want to size something NOT based on explicit number unit (e.g. 100px) NOR its direct parent (e.g. 45%), but rather, on what’s declared as “container”:

2025-09-17T160730

You can find the example here: index-container-query-unit.html (notice how to right one is slightly larger ? because its 50% is based on the “blue box” rather than the “red box”)

Semantic HTML Element

Other than the regular non-semantic HTML element div, h1-h5, ul/ol/li, …; You should consider to other the semantic HTML element as much as possible, below are some of the common ones shared at W3School: <article>,<aside>,<details>,<figcaption>,<figure>,<footer>,<header>,<main>,<mark>,<nav>,<section>,<summary>,<time>

2025-09-17T161356

You can find the full list of available semantic elements at:

By using semantic HTML you get the following benefits: (from most to least important)

  1. Improved Accessibility
  2. Enhanced SEO
  3. Increased Code Readability and Maintainability
  4. Future-Proofing

CSS Modern Unit: Dynamic / Static ViewPort Height Unit for Mobile

If you are working on mobile, these units: {dvh, svh, lvh} are important for you, this video explained it well: https://www.youtube.com/watch?v=4YfBYWXHvPo

2025-09-17T162124

(source: dvh löst Probleme mit CSS height: 100% und 100vh - Stil mit Stil)

Position-Context & Stacking-Context

“Position-context” refers to the area within which an HTML element’s position is determined, established an ancestor element. The default position context is the <html> element, when changing an element to have position:relative , it creates a new “position-context” relative to that element, all of its child’s positioning will be based on this new “position-context”.

See these post for more details:

“stacking-context” is very similar, when you have position:relative/absolute/sticky it creates a new “stacking-context”, and all of its child’s stacking based on z-index will be based on this new “stacking-context”.

See these post for more details:

CSS Property: to Adjust Placement of Media in their Container

You may use object-fit to choose how to zoom in/out a media element (such as <img> or <video>) inside its container, and object-position to alter the alignment of it, below are examples from MDN documents:

2025-09-18T082301

2025-09-18T082410

(reference:

My Custom .pretterrc Configuration File

(remove the comment before usage, and delete the “override” section if you are not using twig)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

{
    "useTabs": true,                                // [General] Tab    Use tabs or spaces for indentation.
    "tabWidth": 4,                                  // [General] Tab    Number of spaces per indentation level.
    "semi": false,                                  // [General] Space  Print semicolons at the ends of statements.
    "bracketSpacing": true,                         // [General] Space  Print spaces between brackets in object literals { foo: bar }.
    "printWidth": 80,                               // [General] Wrap   Specify the line length that the printer will wrap on.
    "proseWrap": "always",                          // [General] Wrap   Wrap prose if it exceeds the print width.
    "singleQuote": false,                           // [General] Quote  If the number of quotes outweighs the other quote, the quote which is less used will be used to format the string - Example: "I'm double quoted" results in "I'm double quoted" and "This \"example\" is single quoted" results in 'This "example" is single quoted'.
    "trailingComma":"all",                          // [General] Comma  Print trailing commas wherever possible in multi-line comma-separated syntactic structures. (objects, arrays, etc.)
    "endOfLine":"lf",                               // [General] EOL    Which end of line characters to apply.
    "checkIgnorePragma":true,                       // [General] Pragma Prettier will ignore files with a @format/@prettier pragma at the top of the file if this option is set to true.
    "insertPragma": false,                          // [General] Pragma Insert a special @format marker at the top of files after format (specifying that the file has been formatted with prettier)
    "requirePragma":false,                          // [General] Pragma Require a special @format marker at the top of files to format them. (if true, it will only fotmat files that contain a special comment @format/@prettier, called a pragma, at the top of the file)
    "arrowParens": "always",                        // [JavaScript]     Include parentheses around a sole arrow function parameter (x) => x.
    "quoteProps": "as-needed",                      // [JavaScript]     Change when properties in objects are quoted.
    "htmlWhitespaceSensitivity": "css",             // [HTML]           How to handle whitespace in HTML.
    "singleAttributePerLine": true,                 // [HTML]           Whether to put each attribute on a new line.
    "plugins":  ["@zackad/prettier-plugin-twig"],   // [TWIG Plugin]    Refer to https://github.com/zackad/prettier-plugin-twig for the explaination of the options below (in the oerrides section)
    "overrides":[
        {
            "files":"*.twig",
            "options":{
                "parser":"twig",
                "twigSingleQuote":false,
                "twigAlwaysBreakObjects":true,
                "twigFollowOfficialCodingStandards":true,
                "twigOutputEndblockNames":true,
                "twigMultiTags":[],
                "twigTestExpressions":[]
            }
        }
    ]
}

When you set overflow-x/overflow-y to be scroll, an element will become a scroll container. On a scroll container, where you can use scroll-snap-type property to choose whether to have a snapping alignment of its children during scroll. And on its direct child children of a scroll container, you can use scroll-snap-align property to choose how to align.

Below are few examples:

  • scroll-snap-type: x mandatory + scroll-snap-align: center

    2025-09-18T083505

  • scroll-snap-type: x mandatory + scroll-snap-align: start

    2025-09-18T084504

  • scroll-snap-type: x proximity + scroll-snap-align: center

    2025-09-18T084630

An you may use scrollbar-width: thin/medium/thick and scrollbar-color: indicator-color track-color property to change the scrollbar indicator’s colour:

2025-09-18T085114

CSS Property: Place Content/Items

If you have done a lot of flex layout/container, you must be familiar with:

  • justify-content: align box of items along the flex-axis (Horizontal axis if flex-direction:row)
  • justify-items: stretch/align items in their boxes along the flex-axis (Horizontal axis if flex-direction:row)
  • align-content: align box of items along the cross-axis (Vertical axis if flex-direction:row)
  • align-items: stretch/align items in their boxes along the cross-axis (Vertical axis if flex-direction:row)

The place-content and place-items are just shorthand version of it:

  • place-content: <align-content> <justify-content>
  • place-items: <align-items> <justify-items>
  • (if only value provided then it will be applied to both axis)

Below are few examples from MDN document:

2025-09-18T090049

2025-09-18T090243

CSS Property: Filter (& Backdrop Filter)

You can use filter to apply special effects such as blur, grayscale, sepia, hue-rotate, invert or adjusting brightness, contrast. And alike transition property, you can apply multiple filters at once:

2025-09-18T091027.png

The same effect could be used for its back-drop (if its have a semi-transparent background, the filter will be applied to the background):

2025-09-18T091716

Reference:

CSS Property: 2D / 3D Transformation

The traditional 2D translate & transformation is based on XY coordinate system:

  • transform: translate(<translate-on-x-axis> <translate-on-y-axis>);
  • transform: rotate(<rotation-based-on-z-axis>);
  • transform: scale(<scale-on-x-axis>, <scale-on-y-axis>);

Where as the 3D translation is based on XYZ coordinate:

  • transform: translate3D(<translate-on-x-axis> <...-y-axis> <...-z-axis>);
  • transform: rotate3d(<x,y,z-vector-that-specify-a-rotation-axis>, <degree>);
  • transform: scale(<scale-on-x-axis>, <...-y-axis>, <...-z-axis>);

You may use one of the following tool to generate your desired transform property:

Reference: