Suggerimenti per DevTools: come esaminare le query dei contenitori CSS
bookmark_borderbookmark
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Sofia Emelianova
Le query dei contenitori CSS sono la nuova funzionalità CSS che entusiasma gli sviluppatori web. Potrebbe scatenare una rivoluzione nel web design, dal responsive design basato su pagine al responsive design basato su contenitori.
Chrome DevTools è qui per aiutarti ad adottare nuovi pattern di progettazione del layout e a rimanere al passo con le ultime tendenze. Con il supporto di questa funzionalità CSS, ora puoi ispezionare e eseguire il debug delle query del contenitore in DevTools.
Il video qui sopra fornisce una panoramica delle query dei contenitori, della loro sintassi e di come ispezzionarle in DevTools.
Ora puoi trovare gli elementi contenitore e i relativi discendenti con il badge corrispondente che attiva e disattiva un overlay a linee tratteggiate.
Controlla le regole @container applicate ai discendenti quando i contenitori soddisfano le condizioni di query.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2022-06-30 UTC."],[],[]]