Add blog post: css-modern-features-in-2026-a-practical-guide.mdx#170
Add blog post: css-modern-features-in-2026-a-practical-guide.mdx#170deepu0 wants to merge 1 commit into
Conversation
|
CodeAnt AI is reviewing your PR. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
📝 WalkthroughWalkthroughAdds a new MDX blog post titled “CSS modern features in 2026: A Practical Guide,” including publication metadata, structured educational content, CSS examples, best practices, and a community discussion prompt. ChangesCSS modern features article
Estimated code review effort: 1 (Trivial) | ~5 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdxParsing error: Invalid left-hand side in prefix operation. (1:2) Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
codeant-ai
Bot
added
the
size:M
Greptile SummaryThis PR adds a new MDX blog post about modern CSS features in 2026.
|
| Filename | Overview |
|---|---|
| content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx | Adds a new MDX post, but the file path is outside the configured blog collection and the declared image asset is missing. |
Reviews (1): Last reviewed commit: "Add blog post: css-modern-features-in-20..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| @@ -0,0 +1,81 @@ | |||
| --- | |||
There was a problem hiding this comment.
This file is added under content/blog-post-2026-07-13/, but the blog collection only loads content/blog/**/*.mdx. With published: true, the article still will not enter the posts data used by the blog pages, so it can be silently absent from the site.
| date: '2026-07-13' | ||
| tags: ['CSS modern features', 'Frontend', '2026'] | ||
| published: true | ||
| image: './images/post-image.png' |
There was a problem hiding this comment.
The post declares image: './images/post-image.png', but the matching file is not added under this post directory. If the post is moved into the collected blog path or the collection pattern is expanded, image validation will resolve this relative path and fail the content build.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx`:
- Around line 53-71: Replace the React/TypeScript Component example, including
Props and JSX, with a practical CSS-only snippet demonstrating a modern feature
such as container queries, :has(), subgrid, or `@scope`. Keep the example relevant
to the surrounding CSS article and ensure it illustrates real-world usage.
- Around line 24-34: Replace the TypeScript useModernPattern example with an
actual CSS snippet demonstrating a modern CSS feature relevant to the article,
such as container queries, :has(), cascade layers, nesting, or color-mix().
Remove the unrelated function and console logging while preserving the
surrounding article structure.
- Around line 1-8: Move the blog post content from the current MDX location into
the loader’s posts directory as a .md file, preserving its existing frontmatter
and body. Add the required subtitle frontmatter field so getPostMetadata can
read the post metadata successfully.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2ed61f0f-4fe4-4f66-a6ef-541b29ad3a21
📒 Files selected for processing (1)
content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx
| --- | ||
| title: 'CSS modern features in 2026: A Practical Guide' | ||
| description: 'A comprehensive guide to css modern features for modern frontend development in 2026.' | ||
| date: '2026-07-13' | ||
| tags: ['CSS modern features', 'Frontend', '2026'] | ||
| published: true | ||
| image: './images/post-image.png' | ||
| --- |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if the blog infrastructure has been updated to support .mdx files or the content/ directory
rg -n '\.mdx|content/' lib/getPostMetaData.ts app/posts/[slug]/page.tsx 2>/dev/null
# Also check for any other post files to understand the expected structure
fd -e md -e mdx . posts/ content/ 2>/dev/null | head -20
# Check if subtitle is used downstream in a way that would break with undefined
rg -n 'subtitle' lib/ app/ --type tsRepository: deepu0/frontend-junction
Length of output: 1301
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the relevant files first
ast-grep outline lib/getPostMetaData.ts --view expanded
ast-grep outline app/posts/[slug]/page.tsx --view expanded
ast-grep outline content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx --view expanded
# Inspect the blog loader and page path handling
cat -n lib/getPostMetaData.ts | sed -n '1,220p'
printf '\n---\n'
cat -n app/posts/[slug]/page.tsx | sed -n '1,240p'
# Look for the actual content source used by the app
printf '\n---\n'
rg -n 'content/blog|posts/|\.mdx|subtitle' app lib content -g '!**/node_modules/**'Repository: deepu0/frontend-junction
Length of output: 5413
Move this post into posts/ as a .md file The blog loader only reads posts/*.md, so this .mdx file under content/blog-post-2026-07-13/ will be skipped. Add the missing subtitle frontmatter too, since getPostMetadata expects it.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx`
around lines 1 - 8, Move the blog post content from the current MDX location
into the loader’s posts directory as a .md file, preserving its existing
frontmatter and body. Add the required subtitle frontmatter field so
getPostMetadata can read the post metadata successfully.
| ```typescript | ||
| // Example of modern css modern features pattern | ||
| function useModernPattern() { | ||
| // Implementation example | ||
| return { | ||
| apply: () => { | ||
| console.log("Applying modern css modern features pattern"); | ||
| } | ||
| }; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Code example is TypeScript, not CSS — doesn't match the article topic.
The article is titled "CSS modern features in 2026" but the first code example is a TypeScript function. Readers expecting CSS examples (e.g., @container, :has(), cascade layers, nesting, color-mix()) will find this confusing and unhelpful. Replace with an actual CSS example relevant to modern CSS features.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx`
around lines 24 - 34, Replace the TypeScript useModernPattern example with an
actual CSS snippet demonstrating a modern CSS feature relevant to the article,
such as container queries, :has(), cascade layers, nesting, or color-mix().
Remove the unrelated function and console logging while preserving the
surrounding article structure.
| ```typescript | ||
| // Real-world application example | ||
| interface Props { | ||
| data: string[]; | ||
| onUpdate: (value: string) => void; | ||
| } | ||
|
|
||
| function Component({ data, onUpdate }: Props) { | ||
| return ( | ||
| <div> | ||
| {data.map(item => ( | ||
| <button key={item} onClick={() => onUpdate(item)}> | ||
| {item} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Real-world example is a React component, not CSS.
Same issue as the first example — this "Real-World Example" in a CSS article shows a React/TSX component rather than CSS. Replace with a practical CSS snippet demonstrating a modern feature such as container queries, :has(), subgrid, or @scope.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx`
around lines 53 - 71, Replace the React/TypeScript Component example, including
Props and JSX, with a practical CSS-only snippet demonstrating a modern feature
such as container queries, :has(), subgrid, or `@scope`. Keep the example relevant
to the surrounding CSS article and ensure it illustrates real-world usage.
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| description: 'A comprehensive guide to css modern features for modern frontend development in 2026.' | ||
| date: '2026-07-13' | ||
| tags: ['CSS modern features', 'Frontend', '2026'] | ||
| published: true |
There was a problem hiding this comment.
Suggestion: This post is marked as published, but it is stored outside the content/blog/**/*.mdx collection path used by the site content loader, so it will never be indexed or rendered in blog listings/routes. Move the file into the configured content/blog/ tree (or update the collection pattern) so publication actually works. [api mismatch]
Severity Level: Critical 🚨
- ❌ New CSS post never appears in blog listing.
- ❌ Direct CSS post route always returns 404.
- ⚠️ Authors misled by published flag not working.Steps of Reproduction ✅
1. Open `velite.config.ts` (lines 11-20, 30-31) and observe the `posts` collection is
defined with `pattern: 'blog/**/*.mdx'` and `root: 'content'`, meaning only files under
`content/blog/` are ingested.
2. Note the new post file path
`/content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx`
(verified via Glob listing), which lives in `content/blog-post-2026-07-13/` rather than
`content/blog/`.
3. The blog index at `app/blog/page.tsx:27-36` builds its `sortedPosts` array from the
`posts` collection (`posts.filter((post) => post.published)`), so any MDX file outside
`content/blog/**` is never included in the list.
4. The post detail route at `app/blog/[...slug]/page.tsx:18-23, 71-80` also searches
within `posts` (via `getPostFromParams`), so this CSS post remains unreachable and returns
`notFound()` even though its frontmatter `published: true` (line 6) indicates it should be
public.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx
**Line:** 6:6
**Comment:**
*Api Mismatch: This post is marked as published, but it is stored outside the `content/blog/**/*.mdx` collection path used by the site content loader, so it will never be indexed or rendered in blog listings/routes. Move the file into the configured `content/blog/` tree (or update the collection pattern) so publication actually works.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| date: '2026-07-13' | ||
| tags: ['CSS modern features', 'Frontend', '2026'] | ||
| published: true | ||
| image: './images/post-image.png' |
There was a problem hiding this comment.
Suggestion: The frontmatter image points to a relative file that is not present in this post directory, which will produce a broken image reference (and may fail content processing where image existence is validated). Add the image at the referenced path or update the path to an existing asset. [possible bug]
Severity Level: Major ⚠️
- ⚠️ Featured image missing or broken for CSS post.
- ⚠️ Potential Velite build error resolving image.
- ⚠️ Blog cards may render without expected thumbnail.Steps of Reproduction ✅
1. Open the MDX file
`content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx` (lines
1-8) and observe the frontmatter line `image: './images/post-image.png'` at line 7.
2. Search the repository for `post-image.png` using Glob `**/post-image.png`; no matches
are found, confirming that no image file with this name exists anywhere under the
`content/` root or project tree.
3. In `velite.config.ts:11-25`, the `posts` collection schema defines `image:
s.image().optional()`, and the config `root: 'content'` (line 31) means `s.image()` will
try to resolve this relative path to a real file under `content/`.
4. When this MDX file is eventually moved into the ingested `content/blog/` tree and
processed, the missing `./images/post-image.png` will either cause a Velite build-time
error or produce a `post.image` pointing to a non-existent asset, which is then used by
the blog index (`components/post-item.tsx:29-37`) and post page
(`app/blog/[...slug]/page.tsx:93-103`) for the featured `next/image` component.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx
**Line:** 7:7
**Comment:**
*Possible Bug: The frontmatter image points to a relative file that is not present in this post directory, which will produce a broken image reference (and may fail content processing where image existence is validated). Add the image at the referenced path or update the path to an existing asset.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix|
|
||
| # CSS modern features in 2026: A Practical Guide | ||
|
|
||
| CSS modern features continues to evolve in 2026, and staying current with the latest patterns and best practices is essential for building modern, performant web applications. In this guide, we'll explore practical techniques you can implement today. |
There was a problem hiding this comment.
Suggestion: This sentence has an obvious grammar typo (“features continues”), which reduces content quality and should be corrected to proper subject-verb agreement. [typo]
Severity Level: Minor 🧹
- ⚠️ Intro paragraph contains noticeable grammar mistake.
- ⚠️ Reduces professionalism of published blog content.
- ⚠️ No functional or runtime behavior impact.Steps of Reproduction ✅
1. Open `content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx`
and locate line 12, which contains the sentence beginning with `CSS modern features
continues to evolve in 2026`.
2. Observe that the subject phrase `CSS modern features` is plural, while the verb
`continues` is singular, resulting in incorrect subject-verb agreement in the very first
paragraph.
3. Once this MDX file is wired into the blog (via the `posts` collection in
`velite.config.ts` and rendered through `app/blog/[...slug]/page.tsx:83-110`), readers of
the article will see this grammatical error in the opening body text.
4. This issue affects only textual content quality; it does not interact with any runtime
logic, rendering pipeline, or routing behavior elsewhere in the codebase.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** content/blog-post-2026-07-13/css-modern-features-in-2026-a-practical-guide.mdx
**Line:** 12:12
**Comment:**
*Typo: This sentence has an obvious grammar typo (“features continues”), which reduces content quality and should be corrected to proper subject-verb agreement.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
1 participant
User description
Blog post about CSS modern features for Frontend Junction
CodeAnt-AI Description
Publish a new guide on modern CSS features for 2026
What Changed
Impact
✅ Fresh published content✅ Clearer guidance for frontend readers✅ Easier discovery of CSS topics💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Summary by CodeRabbit