Any property or value we can set in CSS can now be added directly in webflow and changed across breakpoints.
These are some few tricks to use them properly.
Advanced Font Sizing:
We can use properties like clamp() and container-type for responsive and adaptive layouts in typography.
We can set fluid font sizes using a unit called container query width
For example, setting a font-size of 24.9cqw bases the font size on the width of a specified parent element.
To define the parent it is related to, we can grab it's parent div and give it a custom property of container-type: inline-size
This makes the font size of the contained text responsive to the width of this parent div. As a result, when the width of the parent div is increased or decreased, the font size inside it will grow or shrink accordingly. This approach is better than using calc or media queries because it directly relates to the size of the parent element.
However, this method has an accessibility issue, so I would only recommend this for large headings because when users increase their font size settings, the font size based on container query width may not adjust as expected.
This is because the container might not have enough room to expand, while other elements on the page would still respond to the user's font size adjustments.
Clip Paths:
With the clip-path property, we can create more complex shapes and geometries adding structure to our website.
Smoother Transitions:
When animating an element with move, scale, or rotate, the performance can sometimes appear choppy depending on the element. To improve this, we can apply will-change: transform to the element.
This informs the browser that we will be animating the transform property, helping to smooth out the performance.
Additionally, on live websites, we may experience an annoying scroll bounce when reaching the top or bottom of a page. To fix this, we can add the custom property overscroll-behavior: none to the body or the "body all pages" tag. This will eliminate the scroll bounce effect.
Fix horizontal scroll:
If any elements extend beyond the screen width, a horizontal scrollbar may appear. To fix this, select the entire page wrapper and apply overflow: clip.
This will remove the horizontal scroll while still allowing for sticky elements inside.
Style default elements:
To become more efficient using webflow, these are some practices to follow during any project build
Links:
Target all link tags and set their color from the default webflow blue to their parent color using color: inherit this is one of the many defaults we should be setting on many different elements
Buttons:
Target all button tags and remove their default styles by applying background-color: unset padding: unset and text-align unset
It's always good practice to check Can I use to ensure your css property and value are supported across major browsers.
For reliable references and custom CSS property cheat sheets, consult the MDN Docs instead of W3Schools.
Until next time...