diff --git a/client/src/utils/css-help.ts b/client/src/utils/css-help.ts index f7fad182b1..251c447e53 100644 --- a/client/src/utils/css-help.ts +++ b/client/src/utils/css-help.ts @@ -75,9 +75,9 @@ class CSSHelp { ele.style?.getPropertyValue(property) ); } - getRuleListsWithinMedia(conditionText: string): CSSStyleRule[] { + getRuleListsWithinMedia(mediaText: string): CSSStyleRule[] { const medias = this.getCSSRules('media') as CSSMediaRule[]; - const cond = medias?.find(x => x.conditionText === conditionText); + const cond = medias?.find(x => x?.media?.mediaText === mediaText); const cssRules = cond?.cssRules; return Array.from(cssRules || []) as CSSStyleRule[]; } @@ -86,7 +86,10 @@ class CSSHelp { const link: HTMLLinkElement | null = this.doc?.querySelector( "link[href*='styles']" ); - const style: HTMLStyleElement | null = this.doc?.querySelector('style'); + // Most* browser extensions inject styles with class/media attributes + const style: HTMLStyleElement | null = this.doc?.querySelector( + 'style:not([class]):not([media])' + ); if (link?.sheet?.cssRules?.length) { return link.sheet; } else if (style) { diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md index 40ef0ec505..f126c72dc9 100644 --- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md +++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md @@ -37,14 +37,14 @@ You should declare a `@media` query for devices with a `height` less than or equ ```js const media = new __helpers.CSSHelp(document).getCSSRules('media'); -assert(media.some(x => x.conditionText?.includes('(max-height: 800px)'))); +assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)'))); ``` Your `p` element should have a `font-size` of `10px` when the device `height` is less than or equal to `800px`. ```js const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)'); -assert(rules?.find(x => x.selectorText === 'p')?.style.fontSize === "10px"); +assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px"); ``` Your `p` element should have an initial `font-size` of `20px` when the device `height` is more than `800px`.