DevTools-tips: CSS-containerquery's inspecteren
Stay organized with collections
Save and categorize content based on your preferences.
CSS-containerquery's zijn de nieuwe CSS-functie waar webontwikkelaars enthousiast over zijn. Het kan een revolutie in webontwerp teweegbrengen: van paginagebaseerd responsief ontwerp naar containergebaseerd responsief ontwerp .
Chrome DevTools is er om u te helpen nieuwe lay-outontwerppatronen te gebruiken en op de hoogte te blijven van de nieuwste trends. Met de ondersteuning van deze CSS-functie kunt u nu uw containerquery's in DevTools inspecteren en fouten opsporen.
De video hierboven geeft u een overzicht van containerquery's, hun syntaxis en hoe u deze in DevTools kunt inspecteren.
Je kunt nu containerelementen en hun afstammelingen ontdekken met de bijbehorende badge die een stippellijn-overlay in- of uitschakelt.
Inspecteer @container -regels die worden toegepast op afstammelingen wanneer containers voldoen aan de queryvoorwaarden.
Zie CSS-containerquery's inspecteren en fouten opsporen voor meer informatie over de ondersteuning van containerquery's in DevTools.
Tenzij anders vermeld, is de content op deze pagina gelicentieerd onder de Creative Commons Attribution 4.0-licentie en zijn codevoorbeelden gelicentieerd onder de Apache 2.0-licentie. Voor meer informatie raadpleegt u het Google Developers-sitebeleid. Java is een gedeponeerd handelsmerk van Oracle en/of diens aangesloten entiteiten.
Last updated 2022-06-30 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Translation issue","translationIssue","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2022-06-30 UTC."],[],[]]
