Unify @media and @container behavior and support Range Syntax

[taichi221228]

Describe the bug

Currently Svelte does not fully support the Range Syntax added in Media Queries Level 4.
However, this is already supported by many browsers.
https://caniuse.com/css-media-range-syntax

In addition, css-syntax-error behavior is not consistent between @container and @media.

@media

Ranged syntax cannot be used because of svelte(css-syntax-error) or ESLint errors.

@container

No error occurs and Ranged Syntax can be used.
But this is probably not the proper behavior.
I don't think svelte(css-syntax-error) is working for @container.

Reproduction

https://svelte.dev/repl/f93c20e016614f098b426a3e195ee9ad?version=3.58.0

Please comment out each @media and @contaner here to confirm.

Logs

# `@media`

## Browser
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

## Server

Internal server error: /src/routes/+page.svelte:19:15 Colon is expected
  Plugin: vite-plugin-svelte
  File: /src/routes/+page.svelte:19:15
   17 |    }
   18 |  
   19 |    @media (width <= 400px) {
                         ^
   20 |      h1 {
   21 |        color: blue; (x4)

# `@container`

not error

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 469.70 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.volta/tools/image/node/16.19.0/bin/node
    npm: 8.19.3 - ~/.volta/tools/image/node/16.19.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
  npmPackages:
    svelte: ^3.54.0 => 3.58.0

Severity

annoyance

[gtm-nayan]

Duplicate of #8324

See #8324 (comment)