gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(curriculum): use mediaText for CSSHelp (#42393)

Browse Source 
* fix(curriculum): use mediaText in CSSHelp

prevent selection of style elements with class or media attributes
this should avoid picking up some browser extensions
This commit is contained in:
Shaun Hamilton
2021-06-07 22:33:58 +01:00
committed by GitHub
parent 40401b0792
commit 35b18829d1
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/utils/css-help.ts
View File

@ -75,9 +75,9 @@ class CSSHelp {
ele.style?.getPropertyValue(property) ele.style?.getPropertyValue(property)
); );
} }
getRuleListsWithinMedia(conditionText: string): CSSStyleRule[] { getRuleListsWithinMedia(mediaText: string): CSSStyleRule[] {
const medias = this.getCSSRules('media') as CSSMediaRule[]; 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; const cssRules = cond?.cssRules;
return Array.from(cssRules || []) as CSSStyleRule[]; return Array.from(cssRules || []) as CSSStyleRule[];
} }
@ -86,7 +86,10 @@ class CSSHelp {
const link: HTMLLinkElement | null = this.doc?.querySelector( const link: HTMLLinkElement | null = this.doc?.querySelector(
"link[href*='styles']" "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) { if (link?.sheet?.cssRules?.length) {
return link.sheet; return link.sheet;
} else if (style) { } else if (style) {

4
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
View File

@ -37,14 +37,14 @@ You should declare a `@media` query for devices with a `height` less than or equ
```js ```js
const media = new __helpers.CSSHelp(document).getCSSRules('media'); 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`. Your `p` element should have a `font-size` of `10px` when the device `height` is less than or equal to `800px`.
```js ```js
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)'); 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`. Your `p` element should have an initial `font-size` of `20px` when the device `height` is more than `800px`.