Developer & data · focused workspace

CSS Media Rule Splitter

Extract top-level media-query blocks into separate stylesheets and keep the remaining top-level rules together for review.

Extracted media rulesEditable projectsLocal processing

Source → inspect → export

Open project

Preparing the worked example…

Your source & settings

Settings & options

Open your media file

Files stay in your browser. Try the built-in sample first.

Choose file

Source text is limited to 1.5 million characters per editor; imported text files are limited to 1.5 MB.

Inspect your result

PREVIEW & EXPORT

Output file

Know what changed

Uses the locally hosted CSS-tree parser. Only top-level @media rules are extracted. Linked stylesheet order and cascade behavior can change when files are rearranged; review output before deploying.

Choose another output above or open Export files.

Explore the example

Extract top-level media-query blocks into separate stylesheets and keep the remaining top-level rules together for review.

What you can inspect

Extracted media rules — Query, Source line, Characters.

Keep the result you need

Use the output selector to inspect each generated file, then download it. Save a project to keep source inputs and settings together. Result files and editable projects serve different purposes.

Processing & file support

Source text is limited to 1.5 million characters per editor; imported text files are limited to 1.5 MB.

Your working session

Processing runs locally in a worker with a 30-second cancellation limit. Undo and redo keep up to 20 edits in this tab. Project files include imported assets and are limited to 40 MiB. There is no automatic saving.

Public pages include advertising and optional analytics under our privacy policy. Review the method and any flagged output before sharing files.

Using CSS Media Rule Splitter

Extract top-level media-query blocks into separate stylesheets and keep the remaining top-level rules together for review.

Start with the worked example in stylesheet, then paste your own source or open a text file.
Review your input structure and make any needed edits in the source editors.
Choose “Process source”. Inspect the extracted media rules before using the result.
Download the selected output, inspect other files in Export files and save a project if you want to reopen the same inputs.

Example

Try the built-in example, inspect extracted media rules and compare the result after changing one option.

Questions & answers

What does CSS Media Rule Splitter do?

Extract top-level media-query blocks into separate stylesheets and keep the remaining top-level rules together for review.

What are the important limitations?

Uses the locally hosted CSS-tree parser. Only top-level @media rules are extracted. Linked stylesheet order and cascade behavior can change when files are rearranged; review output before deploying.

Can I save and reopen my work?

Yes. Save a project JSON file containing your inputs, settings and any imported assets. Projects are limited to 40 MiB. Undo/redo stores up to 20 edits in this session and is not saved in the project. There is no automatic saving.

How do imports and output previews work?

Source text is limited to 1.5 million characters per editor; imported text files are limited to 1.5 MB. Text previews show up to 150,000 characters; downloads include the complete output. Tables show 50 rows per page; CSV files include all rows.