[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Flearn-to-implement-css-container-queries":671,"blog-author-\u002Fblog\u002Flearn-to-implement-css-container-queries":1300,"i-material-symbols:arrow-back-rounded":1312},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1286,"date":1287,"description":1288,"draft":1289,"editorsPick":1289,"extension":1290,"featured":1289,"image":1291,"imageAlt":1292,"meta":1293,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1294,"seo":1295,"stem":1296,"tags":1297,"__hash__":1299},"blog\u002Fblog\u002Flearn-to-implement-css-container-queries.md","Learn to Implement CSS Container Queries","Victor Chisom","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fisaac-junior.svg",null,"victor-chisom",{"type":679,"value":680,"toc":1273},"minimark",[681,693,696,701,704,712,720,723,728,734,744,751,762,768,774,777,783,789,796,802,808,811,817,823,827,830,836,842,867,878,884,890,896,902,905,912,926,932,938,944,950,957,963,966,979,985,991,994,1000,1006,1013,1016,1022,1026,1029,1032,1036,1055,1061,1069,1072,1080,1083,1086,1093,1096,1103,1106,1109,1112,1143,1147,1155,1167,1210,1213,1222,1229,1233,1236,1260,1263,1266,1270],[682,683,684,685,692],"p",{},"The media query specification was first recommended ten years ago, and it truly helped us as we transitioned towards ",[686,687,691],"a",{"href":688,"rel":689},"https:\u002F\u002Falistapart.com\u002Farticle\u002Fresponsive-web-design\u002F",[690],"nofollow","the concept of responsive design."," Since the modern web is primarily made up of components, media queries are somewhat inadequate in this context. Fortunately, container queries have emerged to address many of the issues that media queries are unable to address.",[682,694,695],{},"When creating a component, we frequently include a variety of versions and alter them according to the viewport size or CSS class. This isn't always the best option, and it may force us to write CSS that is dependent on a viewport size or a variation class.",[697,698,700],"h2",{"id":699},"what-are-css-container-queries","What Are CSS Container Queries?",[682,702,703],{},"The first thing to know about CSS container queries is that “containers” are the elements being queried, but rules within container queries affect only the container descendants. In other words, you may define main as a container, or perhaps article, or even list items. With this, container queries will allow defining rules for how elements within them change across container sizes.",[682,705,706,711],{},[686,707,710],{"href":708,"rel":709},"https:\u002F\u002Falistapart.com\u002Farticle\u002Fcontainer-queries-once-more-unto-the-breach",[690],"CSS Containment"," incorporates the container queries specification. The contain feature was first introduced in the CSS Containment proposal to support efficiency improvements. It offers a method for web designers to isolate DOM elements and communicate to browsers that they are separate from the rest of the document.",[682,713,714,715,719],{},"Using the ",[716,717,718],"code",{},"container-type"," attribute, a component can check its nearest parent for defined containment.",[682,721,722],{},"That’s it – similar to how media queries for CSS are written, here it is applied to components.",[724,725,727],"h3",{"id":726},"container-queries-syntax","Container Queries Syntax",[682,729,730,731,733],{},"To query a component based on its parent width, we need to use the ",[716,732,718],{}," property. Consider the following example:",[735,736,741],"pre",{"className":737,"code":739,"language":740},[738],"language-text",".wrapper {\n  container-type: inline-size;\n}\n","text",[716,742,739],{"__ignoreMap":743},"",[682,745,746],{},[686,747,750],{"href":748,"rel":749},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=c6744b8f13",[690],"Save this code",[682,752,753,754,757,758,761],{},"This allows us to begin querying a component. In the example below, we need to add a certain style if the container of the ",[716,755,756],{},".card"," element has a width of ",[716,759,760],{},"400px"," or more:",[735,763,766],{"className":764,"code":765,"language":740},[738],"@container (min-width: 400px) {\n  .card {\n    display: flex;\n    align-items: center;\n  }\n}\n",[716,767,765],{"__ignoreMap":743},[682,769,770],{},[686,771,750],{"href":772,"rel":773},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=8d0946bf48",[690],[682,775,776],{},"While the above method is effective, using many containers can make it a little overwhelming. For this reason, it's best to give a container a name:",[735,778,781],{"className":779,"code":780,"language":740},[738],".wrapper {\n  container-type: inline-size;\n  container-name: card;\n}\n",[716,782,780],{"__ignoreMap":743},[682,784,785],{},[686,786,750],{"href":787,"rel":788},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=c8e74ba294",[690],[682,790,791,792,795],{},"The container name can now be added next to ",[716,793,794],{},"@container"," as shown below:",[735,797,800],{"className":798,"code":799,"language":740},[738],"@container card (min-width: 400px) {\n  .card {\n    display: flex;\n    align-items: center;\n  }\n}\n",[716,801,799],{"__ignoreMap":743},[682,803,804],{},[686,805,750],{"href":806,"rel":807},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=5be049a19b",[690],[682,809,810],{},"Let's go back to the first example to see how container queries can help us avoid using several CSS classes:",[735,812,815],{"className":813,"code":814,"language":740},[738],".wrapper {\n  container-type: inline-size;\n  container-name: card;\n}\n.c-article {\n  \u002F* Default stacked style *\u002F\n}\n@container card (min-width: 400px) {\n  \u002F* Horizontal style. *\u002F\n  .c-article {\n    display: flex;\n    align-items: center;\n  }\n}\n",[716,816,814],{"__ignoreMap":743},[682,818,819],{},[686,820,750],{"href":821,"rel":822},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=ef4647ac72",[690],[697,824,826],{"id":825},"when-and-where-to-use-css-container-queries","When and Where to Use CSS Container Queries",[682,828,829],{},"For this project, we'll utilize plain HTML and CSS. This is our first HTML. You'll see that we've included a link to our own \"styles.css file\" as well:",[735,831,834],{"className":832,"code":833,"language":740},[738],"\u003C!-- index.html -->\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \u002F>\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n    \u003Ctitle>Container Queries\u003C\u002Ftitle>\n \u003C!-- our own styles -->\n    \u003Clink href=\"style.css\" rel=\"stylesheet\" \u002F>\n  \u003C\u002Fhead>\n\n  \u003Cbody>\n  \u003C\u002Fbody>\n\n\u003C\u002Fhtml>\n",[716,835,833],{"__ignoreMap":743},[682,837,838],{},[686,839,750],{"href":840,"rel":841},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=79a2439458",[690],[682,843,844,845,848,849,852,853,856,857,860],{},"To get started, we'll make a very straightforward card with a picture, a title, and some text. A ",[716,846,847],{},"card-header"," with an image and a ",[716,850,851],{},"card-body"," with a title and other card elements will make up this card. The image remains on the left and the remaining text content is on the right because the card is styled with ",[716,854,855],{},"flex"," and ",[716,858,859],{},"flex-direction: row",[861,862,863],"em",{},[864,865,866],"strong",{},".",[682,868,869,870,873,874,877],{},"To center everything on the page, we'll surround this card in a container and use a ",[716,871,872],{},"div"," with the class parent set to ",[716,875,876],{},"big",":",[735,879,882],{"className":880,"code":881,"language":740},[738],"\u003Cbody>\n    \u003Cdiv class=\"container\">\n      \u003Cdiv class=\"parent large\">\n        \u003Cdiv class=\"card\">\n          \u003Cdiv class=\"card--header\">\n            \u003Cimg\n             class=\"card--image\"\n             src=\"house-project.jpg\"\n             alt=\"card image\"\n             width=\"500\"\n             height=\"400\"\n            \u002F>\n            \u003C!-- we have this img.jpeg file in our folder -->\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"card--body\">\n            \u003Ch1 class=\"card--title\">The Customer's Choice\u003C\u002Fh1>\n            \u003Ch3 class=\"card--content\">\n              You've got to start with the Customer experience and work back\n              towards the technology, not the other way round. Quality in a\n              product or service is not what the supplier puts in. it is what the\n              the customer gets out and is willing to pay for. a product is not\n              Quality because it is hard to make and costs a lot of money, as\n              manufacturers typically believe.\n            \u003C\u002Fh3>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fbody>\n",[716,883,881],{"__ignoreMap":743},[682,885,886],{},[686,887,750],{"href":888,"rel":889},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=e01148b22e",[690],[735,891,894],{"className":892,"code":893,"language":740},[738],"\u002F* styles.css *\u002F\nbody {\n background-color: rgb(230, 205, 173);\n}\n.container {\n display: grid;\n place-items: center;\n grid-gap: 1em;\n}\n.card {\n background: white;\n border-radius: 2em;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n padding: 2em;\n}\n.card--header {\n width: 100%;\n}\n.card--image {\n border-radius: 1em;\n object-fit: cover;\n height: 100%;\n width: 100%;\n}\n.card--body {\n padding: 2em;\n flex: 3;\n}\n.card--header {\n flex: 2;\n}\n.large {\n width: 100%;\n}\n",[716,895,893],{"__ignoreMap":743},[682,897,898],{},[686,899,750],{"href":900,"rel":901},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=956e4e97c7",[690],[682,903,904],{},"Your page will look like this:",[682,906,907],{},[908,909],"img",{"alt":910,"src":911},"resulting CSS webpage showing 'the customers choice'","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Flearn-to-implement-css-container-queries\u002Fimg-001.png",[682,913,914,915,917,918,921,922,925],{},"The same card will be copied and pasted into a new ",[716,916,872],{}," that has the class ",[716,919,920],{},"parent small",". For the ",[716,923,924],{},"small"," class, we will additionally specify some styles:",[735,927,930],{"className":928,"code":929,"language":740},[738],"\u003C!-- index.html -->\n\n\u003Cbody>\n    \u003Cdiv class=\"container\">\n        \u003Cdiv class=\"parent large\">\n            \u003Cdiv class=\"card\">\n              \u003C!-- ...card -->\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"parent small\">\n            \u003Cdiv class=\"card\">\n             \u003C!-- ...card -->\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n",[716,931,929],{"__ignoreMap":743},[682,933,934],{},[686,935,750],{"href":936,"rel":937},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=248f4db9a9",[690],[735,939,942],{"className":940,"code":941,"language":740},[738],"\u002F styles.css\n.small {\n width: 500px;\n}\n",[716,943,941],{"__ignoreMap":743},[682,945,946],{},[686,947,750],{"href":948,"rel":949},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=d8f7499591",[690],[682,951,952,953,956],{},"Keep in mind that both cards are identical, and are simply arranged in two distinct ",[716,954,955],{},"divs",". This is how they appear:",[682,958,959],{},[908,960],{"alt":961,"src":962},"resulting CSS webpage showing 'the customers choice' with two separate divs","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Flearn-to-implement-css-container-queries\u002Fimg-002.png",[682,964,965],{},"Now, let’s add container queries…",[682,967,968,969,971,972,975,976,978],{},"In the event that the container's width is less than 500 pixels, we want the text content to appear below the image on the card. In order for container queries to function, we must apply CSS to the container to establish the \"containment context\"; the children within this containment context respond to the container's properties via container queries. To contain these cards, we will create ",[716,970,955],{}," with the class ",[716,973,974],{},"parent",". To accomplish this, we change the ",[716,977,974],{}," class's CSS:",[735,980,983],{"className":981,"code":982,"language":740},[738],"\u002F* styles.css *\u002F\n.parent {\n contain: layout inline-size style;\n}\n",[716,984,982],{"__ignoreMap":743},[682,986,987],{},[686,988,750],{"href":989,"rel":990},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=3c554f9a73",[690],[682,992,993],{},"Now, we can add container queries to our card:",[735,995,998],{"className":996,"code":997,"language":740},[738],"\u002F* styles.css *\u002F\n@container(max-width: 500px) {\n .card {\n flex-direction: column;\n background-color: pink;\n    }\n}\n",[716,999,997],{"__ignoreMap":743},[682,1001,1002],{},[686,1003,750],{"href":1004,"rel":1005},"https:\u002F\u002Fvictorchisom25.pieces.cloud\u002F?p=a21847a741",[690],[682,1007,1008,1009,971,1011,866],{},"The end! Now, if you return to your browser, you’ll see that the new styles have been applied to the card within the ",[716,1010,872],{},[716,1012,924],{},[682,1014,1015],{},"Congratulations! 🎊",[682,1017,1018,1019],{},"Rather than merely using the device characteristics, we were able to modify the styling based on the container size (screen size). ",[861,1020,1021],{},"This is the power of container queries.",[697,1023,1025],{"id":1024},"compatibility-issues-with-container-queries","Compatibility Issues with Container Queries",[682,1027,1028],{},"This is similar to how every website should work flawlessly across all OS platforms and browsers in software development, due to the fact that CSS is a crucial component in creating any modern website.",[682,1030,1031],{},"Given the widespread fragmentation of devices and browsers, CSS will inevitably need to be interoperable with a variety of browsers in order for a site to render flawlessly for users with various browser preferences. CSS is a styling element that is applied to all websites to improve their aesthetic appeal.",[724,1033,1035],{"id":1034},"browser-support","Browser Support",[682,1037,1038,1039,1042,1043,1048,1049,1054],{},"Container queries are only supported on Chrome Canary and Safari, and require that the ",[716,1040,1041],{},"enable-container-queries"," flag is enabled. You can download Chrome Canary ",[686,1044,1047],{"href":1045,"rel":1046},"https:\u002F\u002Fwww.google.com\u002Fintl\u002Fen_in\u002Fchrome\u002Fcanary\u002F",[690],"here",". Once installed, open the URL ",[686,1050,1053],{"href":1051,"rel":1052},"http:\u002F\u002Fchrome\u002F\u002Fflags\u002F#enable-container-queries",[690],"chrome:\u002F\u002Fflags\u002F#enable-container-queries"," and enable container queries:",[682,1056,1057],{},[908,1058],{"alt":1059,"src":1060},"screenshot of the 'enable css container queries' command in chrome canary","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Flearn-to-implement-css-container-queries\u002Fimg-003.png",[682,1062,1063,1064],{},"There is a polyfill under development that you can use for container queries today. You can check it out ",[686,1065,1068],{"href":1066,"rel":1067},"https:\u002F\u002Fwww.bram.us\u002F2021\u002F04\u002F27\u002Fa-first-look-at-cqfill-a-polyfill-for-css-container-queries\u002F",[690],"here.",[682,1070,1071],{},"This table below shows an up-to-date list of browser support:",[1073,1074,1076,1077],"h4",{"id":1075},"chromium-blink","Chromium ",[861,1078,1079],{},"(Blink)",[682,1081,1082],{},"✅ Available in Chromium 106 and up.",[682,1084,1085],{},"Experimental support first appeared in Chromium 91.0.4459.0 with the #enable-container-queries flag enabled",[1073,1087,1089,1090],{"id":1088},"firefox-gecko","Firefox ",[861,1091,1092],{},"(Gecko)",[682,1094,1095],{},"🚫 No support",[1073,1097,1099,1100],{"id":1098},"safari-webkit","Safari ",[861,1101,1102],{},"(WebKit)",[682,1104,1105],{},"✅ Available in Safari 16.0 and up.",[682,1107,1108],{},"Experimental support first appeared in Safari Technology Preview 142.",[682,1110,1111],{},"To stay up-to-date regarding browser support, you can follow these tracking issues:",[1113,1114,1115,1125,1134],"ul",{},[1116,1117,1118,1119,1124],"li",{},"Blink\u002FChromium: ",[686,1120,1123],{"href":1121,"rel":1122},"https:\u002F\u002Fbugs.chromium.org\u002Fp\u002Fchromium\u002Fissues\u002Fdetail?id=1145970",[690],"Issue #1145970"," – Fixed (Closed)",[1116,1126,1127,1128,1133],{},"Gecko\u002FFirefox: ",[686,1129,1132],{"href":1130,"rel":1131},"https:\u002F\u002Fbugzilla.mozilla.org\u002Fshow_bug.cgi?id=1744221",[690],"Issue #1744221"," – NEW",[1116,1135,1136,1137,1142],{},"WebKit\u002FSafari: ",[686,1138,1141],{"href":1139,"rel":1140},"https:\u002F\u002Fbugs.webkit.org\u002Fshow_bug.cgi?id=229659",[690],"Issue #229659"," – Resolved\u002FFixed",[724,1144,1146],{"id":1145},"polyfill","Polyfill",[682,1148,1149,1150],{},"A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. You can learn more about it in this article: ",[686,1151,1154],{"href":1152,"rel":1153},"https:\u002F\u002Fremysharp.com\u002F2010\u002F10\u002F08\u002Fwhat-is-a-polyfill\u002F",[690],"What is a Polyfill?",[682,1156,1157,1158,1161,1162,1166],{},"Polyfill is not like ",[716,1159,1160],{},"cqfill",", ",[686,1163,1165],{"href":1066,"rel":1164},[690],"which is covered here",". Characteristics of a polyfill for container queries include the following:",[1113,1168,1169,1180,1190],{},[1116,1170,1171,1172,1175,1176,1179],{},"It does not require you to declare a separate custom property ",[716,1173,1174],{},"-–css-contain"," that duplicates the value of the ",[716,1177,1178],{},"contain"," property.",[1116,1181,1182,1183,1185,1186,1189],{},"It does not require you to duplicate your ",[716,1184,794],{}," rule into a ",[716,1187,1188],{},"@media"," rule.",[1116,1191,1192,1193,1195,1196,1199,1200,1203,1204,1207],{},"It parses the newer container queries syntax that uses the ",[716,1194,718],{}," + ",[716,1197,1198],{},"container-name"," properties ",[861,1201,1202],{},"(shorthanded to"," ",[716,1205,1206],{},"container",[861,1208,1209],{},").",[682,1211,1212],{},"Because of this, the polyfill is a drop-in piece of code that will auto-magically do its thing.",[682,1214,1215,1216,856,1219,866],{},"A polyfill transpiles CSS code on the client-side and implements container query functionality using ",[716,1217,1218],{},"ResizeObserver",[716,1220,1221],{},"MutationObserver",[682,1223,1224,1225,1228],{},"Additionally, this polyfill does not rely on ",[716,1226,1227],{},"requestAnimationFrame",", which makes it more performant.",[1073,1230,1232],{"id":1231},"notes","Notes",[682,1234,1235],{},"Do note that this polyfill comes with a few limitations:",[1113,1237,1238,1254,1257],{},[1116,1239,1240,1241,1161,1244,1161,1247,1250,1251,866],{},"Currently, only a small number of queries are supported. Only the following values are supported: ",[716,1242,1243],{},"min-width",[716,1245,1246],{},"max-width",[716,1248,1249],{},"min-height",", and ",[716,1252,1253],{},"max-height",[1116,1255,1256],{},"No layering of CQs inside of other media queries is supported; only top-level container queries are.",[1116,1258,1259],{},"The only way to provide container query thresholds is in pixels.",[682,1261,1262],{},"These restrictions are the outcome of a design decision:",[682,1264,1265],{},"In order to keep the polyfill simple(-ish), compact, and effective, we want to make sure that it functions properly for the majority of use-cases. This sounds entirely logical.",[697,1267,1269],{"id":1268},"conclusion","Conclusion",[682,1271,1272],{},"In time, we’ll be able to approach responsive designs in a much more intelligent way thanks to container queries. Nevertheless, container queries are still in their infancy. But as you can tell, they are easy to implement and can help developers with maintainability while working with CSS.",{"title":743,"searchDepth":1274,"depth":1274,"links":1275},2,[1276,1280,1281,1285],{"id":699,"depth":1274,"text":700,"children":1277},[1278],{"id":726,"depth":1279,"text":727},3,{"id":825,"depth":1274,"text":826},{"id":1024,"depth":1274,"text":1025,"children":1282},[1283,1284],{"id":1034,"depth":1279,"text":1035},{"id":1145,"depth":1279,"text":1146},{"id":1268,"depth":1274,"text":1269},"Software Development","2023-02-01T00:00:00.000Z","Container queries are still in their infancy, but they are easy to implement and can help developers with maintainability while working with CSS.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Flearn-to-implement-css-container-queries\u002Fhero.jpeg","Decorative cover image showing containers",{},"\u002Fblog\u002Flearn-to-implement-css-container-queries",{"title":673,"description":1288},"blog\u002Flearn-to-implement-css-container-queries",[1298],"css; testing-4","R4GLsbR54Foat9B5nfmtk51-TzNyxWlgAF-BoADC_l8",{"id":1301,"title":674,"body":1302,"description":743,"draft":1289,"extension":1290,"meta":1306,"navigation":32,"path":1307,"photo":1308,"photoAlt":676,"seo":1309,"stem":1310,"__hash__":1311},"authors\u002Fauthors\u002Fvictor-chisom.md",{"type":679,"value":1303,"toc":1304},[],{"title":743,"searchDepth":1274,"depth":1274,"links":1305},[],{},"\u002Fauthors\u002Fvictor-chisom","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fplaceholder.svg",{"title":674,"description":743},"authors\u002Fvictor-chisom","GxIq3ltNtDfj883QKMNaZL396CJ0KzyYO7yim66r9Sw",{"left":1313,"top":1313,"width":1314,"height":1314,"rotate":1313,"vFlip":1289,"hFlip":1289,"body":1315},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]