--- title: Best Frontend Masters posts — August 2026 | daily.dev description: The most upvoted Frontend Masters posts from August 2026, curated by the daily.dev community. canonical: https://daily.dev/sources/frontendmasters/best-of/2026/08 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/frontendmasters/best-of/2026/08 og:type: website og:site_name: daily.dev og:title: Best Frontend Masters posts — August 2026 | daily.dev og:description: The most upvoted Frontend Masters posts from August 2026, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Frontend Masters — August 2026 1. 1 [](https://daily.dev/posts/css-infinity-use-cases-master-dev-blog-6sp5h7gcq "CSS Infinity Use Cases – Master.dev Blog") Article Frontend Masters · 3w CSS Infinity Use Cases – Master.dev Blog CSS now supports an Infinity keyword, but it must be used inside calc(), such as border-radius: calc(infinity \* 1px). This is useful for expressing intentionally huge values like 99999 in a clearer way. However, it doesn't work everywhere - it fails inside clamp() when using a large value like 1e5 as a bound, as demonstrated in a related CodePen example. 65 7 2. 2 [](https://daily.dev/posts/hover-proximity-using-modern-css-master-dev-blog-wa5xjv85b "Hover Proximity Using Modern CSS – Master.dev Blog") Article Frontend Masters · 2w Hover Proximity Using Modern CSS – Master.dev Blog An in-depth technique for creating a 'hover proximity' effect in CSS grids, where hovering an element visually affects nearby elements with distance-based scaling, opacity, or border-radius changes—entirely without JavaScript. The approach calculates each element's \[x, y\] coordinates using sibling-index() and sibling-count(), derives the hovered element's coordinates via scroll-driven animations (view-timeline and animation-timeline tied to element position), and applies conditional styling using the new if() and style() query syntax. The piece also shows variations like selecting rows, columns, or diagonals, and closes with a distance-based formula for smooth proximity effects. Only Chrome and Edge fully support the required features at time of writing. 18 1 3. 3 [](https://daily.dev/posts/delayed-then-instant-tooltips-with-html-css-alone-master-dev-blog-kllvwjq2o "Delayed-Then-Instant Tooltips with HTML & CSS Alone – Master.dev Blog") Article Frontend Masters · 3w Delayed-Then-Instant Tooltips with HTML & CSS Alone – Master.dev Blog A response to a React-based tooltip delay solution demonstrates how to build delayed-then-instant tooltips using only HTML and CSS, leveraging popover="hint", the interestfor attribute, interest-delay-start/end properties, and CSS anchor positioning for edge detection. Since browser support (notably Safari) is incomplete, a CSS-only fallback using a custom --warm variable and transition delays replicates the same timing behavior without any JavaScript. 11 4. 4 [](https://daily.dev/posts/5-css-properties-you-should-know-for-better-text-designs-master-dev-blog-a5lhf6s02 "5 CSS Properties You Should Know for Better Text Designs – Master.dev Blog") Article Frontend Masters · 5w 5 CSS Properties You Should Know for Better Text Designs – Master.dev Blog A practical guide to five CSS properties useful for typographic design: \`background-clip\` for masking images inside text, \`vertical-align\` vs \`align-content\` for vertical alignment, \`box-decoration-break\` for consistent fragment edge styling, \`letter-spacing\` for spacing and animation effects, and \`text-combine-upright\` for mixing horizontal text in vertical writing modes. Each property is explained with concise code examples. 8 1 [See all Frontend Masters archives](/sources/frontendmasters/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/frontendmasters/best-of/2026/08#page","url":"https://daily.dev/sources/frontendmasters/best-of/2026/08","name":"Best Frontend Masters Posts — August 2026","description":"The most upvoted Frontend Masters posts from August 2026, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/frontendmasters/best-of/2026/08#items","numberOfItems":4,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/css-infinity-use-cases-master-dev-blog-6sp5h7gcq","name":"CSS Infinity Use Cases – Master.dev Blog"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/hover-proximity-using-modern-css-master-dev-blog-wa5xjv85b","name":"Hover Proximity Using Modern CSS – Master.dev Blog"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/delayed-then-instant-tooltips-with-html-css-alone-master-dev-blog-kllvwjq2o","name":"Delayed-Then-Instant Tooltips with HTML & CSS Alone – Master.dev Blog"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/5-css-properties-you-should-know-for-better-text-designs-master-dev-blog-a5lhf6s02","name":"5 CSS Properties You Should Know for Better Text Designs – Master.dev Blog"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/frontendmasters/best-of"},{"@type":"ListItem","position":5,"name":"August 2026"}]}]} ```