Skip to content

Commit 9f55af7

Browse files
0xdevalias0xdevalias
committed
[devtools-snippet] add viewCSSMediaRules.js
1 parent dc8573b commit 9f55af7

File tree

1 file changed

+194
-0
lines changed

1 file changed

+194
-0
lines changed

‎devtools-snippets/viewCSSMediaRules.js

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
// Script Version 1
2+
3+
// const stylesheets = Array.from(document.styleSheets);
4+
// const breakpoints = new Set();
5+
6+
// for (const stylesheet of stylesheets) {
7+
// try {
8+
// for (const rule of stylesheet.cssRules) {
9+
// if (rule instanceof CSSMediaRule && rule.media.mediaText) {
10+
// const mediaText = rule.media.mediaText;
11+
// const matches = mediaText.matchAll(/(\(min-width:\s*(\d+)(px|em|rem)\))|(\(max-width:\s*(\d+)(px|em|rem)\))/g);
12+
// for (const match of matches) {
13+
// const breakpointValue = match[2] || match[5];
14+
// const breakpointUnit = match[3] || match[6];
15+
// breakpoints.add(`${breakpointValue}${breakpointUnit}`);
16+
// }
17+
// }
18+
// }
19+
// } catch (error) {
20+
// // Ignore CORS errors for external stylesheets
21+
// if (!(error instanceof DOMException && error.name === 'SecurityError')) {
22+
// console.error('Error accessing stylesheet:', error);
23+
// }
24+
// }
25+
// }
26+
27+
// // Convert the Set to an Array and sort numerically
28+
// const cssMediaBreakpointsV1 = Array.from(breakpoints).sort((a, b) => {
29+
// const [valueA, unitA] = a.match(/^(\d+)([a-z%]+)$/).slice(1);
30+
// const [valueB, unitB] = b.match(/^(\d+)([a-z%]+)$/).slice(1);
31+
32+
// // Compare numerical values, keeping units in case of identical values
33+
// return Number(valueA) - Number(valueB) || unitA.localeCompare(unitB);
34+
// });
35+
36+
// const stylesheets = Array.from(document.styleSheets);
37+
// const cssMediaBreakpointsV1 = [];
38+
39+
// for (const stylesheet of stylesheets) {
40+
// try {
41+
// for (const rule of stylesheet.cssRules) {
42+
// if (rule instanceof CSSMediaRule && rule.media.mediaText) {
43+
// const mediaText = rule.media.mediaText;
44+
// const matches = mediaText.matchAll(/\((min|max)-(width|height):\s*(\d+)(px|em|rem)\)/g);
45+
// const breakpoints = [];
46+
47+
// for (const match of matches) {
48+
// breakpoints.push({
49+
// type: match[1], // 'min' or 'max'
50+
// dimension: match[2], // 'width' or 'height'
51+
// value: parseInt(match[3], 10), // Numeric value
52+
// unit: match[4], // Unit ('px', 'em', or 'rem')
53+
// fullMediaText: mediaText // Full media query text
54+
// });
55+
// }
56+
57+
// if (breakpoints.length > 0) {
58+
// cssMediaBreakpointsV1.push({
59+
// fullMediaText: mediaText,
60+
// breakpoints
61+
// });
62+
// }
63+
// }
64+
// }
65+
// } catch (error) {
66+
// // Ignore CORS errors for external stylesheets
67+
// if (!(error instanceof DOMException && error.name === 'SecurityError')) {
68+
// console.error('Error accessing stylesheet:', error);
69+
// }
70+
// }
71+
// }
72+
73+
// Script Version 2
74+
75+
// const cssMediaBreakpointsV2 = [
76+
// ...new Set(
77+
// [...document.styleSheets]
78+
// .filter(sheet => {
79+
// try {
80+
// return sheet.cssRules; // Check if cssRules can be accessed
81+
// } catch (e) {
82+
// return false;
83+
// }
84+
// })
85+
// .flatMap(sheet => [...sheet.cssRules])
86+
// .filter(rule => rule.type === CSSRule.MEDIA_RULE) // Ensure it's a media rule
87+
// .flatMap(rule => {
88+
// const matches = rule.media.mediaText.matchAll(/(min|max)-width:\s*(\d+)(px|em|rem)/g);
89+
// return [...matches].map(match => ({
90+
// type: match[1], // 'min' or 'max'
91+
// value: parseInt(match[2], 10), // Numeric value
92+
// unit: match[3], // Unit ('px', 'em', or 'rem')
93+
// fullMediaText: rule.media.mediaText // Full media query text
94+
// }));
95+
// })
96+
// )
97+
// ];
98+
99+
const cssMediaBreakpointsV2 = [
100+
...new Set(
101+
[...document.styleSheets]
102+
.filter(sheet => {
103+
try {
104+
return sheet.cssRules; // Check if cssRules can be accessed
105+
} catch (e) {
106+
return false;
107+
}
108+
})
109+
.flatMap(sheet => [...sheet.cssRules])
110+
.filter(rule => rule.type === CSSRule.MEDIA_RULE) // Ensure it's a media rule
111+
.map(rule => {
112+
const mediaText = rule.media.mediaText;
113+
const matches = mediaText.matchAll(/\((min|max)-(width|height):\s*(\d+)(px|em|rem)\)/g);
114+
const breakpoints = [];
115+
116+
for (const match of matches) {
117+
breakpoints.push({
118+
type: match[1], // 'min' or 'max'
119+
dimension: match[2], // 'width' or 'height'
120+
value: parseInt(match[3], 10), // Numeric value
121+
unit: match[4] // Unit ('px', 'em', or 'rem')
122+
});
123+
}
124+
125+
return {
126+
fullMediaText: mediaText,
127+
breakpoints
128+
};
129+
})
130+
)
131+
];
132+
133+
// Output
134+
135+
console.log(`Screen Dimensions: ${window.screen.width}x${window.screen.height}`);
136+
console.log(`Window Dimensions: ${window.innerWidth}x${window.innerHeight}`);
137+
console.log(`Window Position: (${window.screenX}, ${window.screenY})`);
138+
console.log(
139+
'CSS Media Breakpoints',
140+
// {
141+
// cssMediaBreakpointsV1,
142+
cssMediaBreakpointsV2
143+
// }
144+
);
145+
146+
// Checks
147+
148+
// const currentWidth = window.innerWidth;
149+
// const currentHeight = window.innerHeight;
150+
151+
// const threshold = 5; // Margin around breakpoints
152+
153+
// const problematicBreakpointsV2 = cssMediaBreakpointsV2.filter(bp => {
154+
// if (bp.unit === 'px') {
155+
// if (bp.type === 'max') {
156+
// return currentWidth <= bp.value + threshold || currentHeight <= bp.value + threshold;
157+
// } else if (bp.type === 'min') {
158+
// return currentWidth >= bp.value - threshold || currentHeight >= bp.value - threshold;
159+
// }
160+
// }
161+
// return false;
162+
// });
163+
164+
// if (problematicBreakpointsV2.length > 0) {
165+
// console.log('Potential issues with breakpoints:', problematicBreakpointsV2);
166+
// } else {
167+
// console.log('No breakpoint issues detected.');
168+
// }
169+
170+
const currentWidth = window.innerWidth;
171+
const currentHeight = window.innerHeight;
172+
173+
const threshold = 5; // Margin around breakpoints
174+
175+
const problematicBreakpoints = cssMediaBreakpointsV2.filter(bp =>
176+
bp.breakpoints.some(br => {
177+
if (br.unit === 'px') {
178+
const isClose = (
179+
(br.dimension === 'width' && Math.abs(currentWidth - br.value) <= threshold) ||
180+
(br.dimension === 'height' && Math.abs(currentHeight - br.value) <= threshold)
181+
);
182+
return isClose;
183+
}
184+
return false;
185+
})
186+
);
187+
188+
if (problematicBreakpoints.length > 0) {
189+
// console.log('Potential issues with breakpoints:', problematicBreakpoints.map(bp => bp.fullMediaText));
190+
console.log('Potential issues with breakpoints:', problematicBreakpoints);
191+
} else {
192+
console.log('No breakpoint issues detected.');
193+
}
194+

0 commit comments

Comments
 (0)