Unknown at rule @container

[FKlusmann]

Type: Bug

Based on https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

This works, however VSC warns: Unknown at rule @container css(unknownAtRules) [ln 54, Col 7]

I have this HTML:

<div id="wrapper">
  <main>
    <p>
... etc. ...


and this CSS:	

  #wrapper {
    container-type: inline-size;
    display: block;
    width: 90%;
    max-width: 10in; 
  }
  main {
    width: 100%;
    max-width: 65ch;
    /* calc a in px + (b - a) * (( 100vw - c in px) / (d - c))); 
       where a is the smallest font size to be seen at c width 
       and b is the largest font size to be seen at d with. */
    font-size: calc(0.875rem + (24 - 14) * ((100vw - 360px) / (1070 - 360)));
  }
  /* container is defined in #wrapper obove */
  /* If the container is larger than 927px */
  /* everything inside main will be 24px */
  @container (min-width: 929.35px) {
    main * {
      font-size: 24px;
    }
  }

VS Code version: Code 1.82.3 (fdb9883, 2023-10-02T10:51:22.294Z)
OS version: Windows_NT x64 10.0.22621
Modes:

System Info

Item	Value
CPUs	AMD Ryzen 7 5700U with Radeon Graphics (16 x 1797)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	undefined
Memory (System)	15.35GB (5.13GB free)
Process Argv	--crash-reporter-id 33ad59e0-57ae-479d-a730-d22b640dc27f
Screen Reader	no
VM	0%

Extensions (16)

Extension	Author (truncated)	Version
vscode-intelephense-client	bme	1.9.5
vscode-firefox-debug	fir	2.9.10
live-sass	gle	6.1.1
vscode-edge-devtools	ms-	2.1.3
isort	ms-	2023.10.1
python	ms-	2023.16.0
vscode-pylance	ms-	2023.9.30
jupyter	ms-	2023.8.1002501831
jupyter-keymap	ms-	1.1.2
jupyter-renderers	ms-	1.0.17
vscode-jupyter-cell-tags	ms-	0.1.8
vscode-jupyter-slideshow	ms-	0.1.5
live-server	ms-	0.4.9
notepadplusplus-keybindings	ms-	1.0.7
LiveServer	rit	5.7.9
php-debug	xde	1.33.0

A/B Experiments

vsliv368:30146709
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vstes627:30244334
vslsvsres303:30308271
vserr242cf:30382550
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263cf:30335440
vscod805cf:30301675
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
vsaa593cf:30376535
pythonvs932:30410667
vsclangdf:30486550
c4g48928:30535728
dsvsc012:30540252
pynewext54:30695312
azure-dev_surveyone:30548225
3biah626:30602489
f6dab269:30613381
showlangstatbar:30737416
0bi6i642:30841073
03d35959:30757346
ecj1e332:30736112
pythonfmttext:30731395
fixshowwlkth:30771522
showindicator:30805244
pythongtdpath:30769146
i26e3531:30792625
pythonnosmt12:30797651
pythonidxpt:30805730
pythonnoceb:30805159
copilotsettingc:30839828
synctok:30821570
dsvsc013:30795093
dsvsc014:30804076
diffeditorv2:30821572
dsvsc015:30845448

[FKlusmann]

My code did not format as I wished. The relevant HTML and CSS is at
https://codepen.io/FKlusmann/pen/qBLJOEg

[gjsjohnmurray]

Please see https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks for how to put code in a GH issue.

[FKlusmann]

Thank you, gjsjohnmurray.

I edited the original post.

[aeschli]

Duplicate of #170589