https://dev.to/maroun_baydoun/using-media-queries-with-javascript-4aeo - use #CSS #MediaQuery in #JavaScript. Nice code samples https://www.linkedin.com/in/marounbaydoun.

In Safari, does anyone know why the existence of a container definition (`container-name`/`container-type`) in a layout results in media queries not getting executed at all or being delayed by 5 to 10 seconds? Like you resize the window and nothing happens, you can still interact with the site and then suddenly the layout flips?! Experienced this for the first time and am a bit stumped.

#webdesign #css #safari #bug #containerQuery #mediaQuery

Páginas adaptadas para imprimir con CSS https://lineadecodigo.com/css/paginas-adaptadas-para-imprimir-con-css/ por @victor_cuervo #css #mediaquery #print

#Development #Techniques
Getting oriented with HTML video · How to serve a clip in portrait or landscape format https://ilo.im/161hb7

_____
#Video #WebComponent #HtmlWebComponent #ResponsiveDesign #WebDev #Frontend #HTML #CSS #MediaQuery

#Development #Techniques
Getting oriented with HTML video · How to serve a clip in portrait or landscape format https://ilo.im/161hb7

_____
#Video #WebComponent #HtmlWebComponent #ResponsiveDesign #WebDev #Frontend #HTML #CSS #MediaQuery

#Development #Approaches
CSS @import is cool, actually · It delivers some useful features a ‘link’ doesn’t offer https://ilo.im/161egj

_____
#Stylesheets #Browser #WebPerf #WebDev #Frontend #CSS #FeatureQuery #MediaQuery

#Development #Opportunities
‘Smart’ CSS layouts with container queries · New options we never had with media queries https://ilo.im/15zshu

_____
#ModernCSS #Layout #ContainerQuery #MediaQuery #CssGrid #CssFlexbox #WebDev #Frontend #CSS

#Development #Guides
CSS Container Queries · A contemporary approach to responsive web design https://ilo.im/15z5q7

_____
#Browser #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS #MediaQuery #ContainerQuery #StyleQuery

Pure CSS text effect https://codepen.io/thebabydino/details/XWQQRWG

No text duplication, no JS, no images save for CSS gradients, no SVG at all. Under 20 CSS declarations, including layout, prettifying, `@​media` queries, `@​supports` blocks, CSS variable declarations...

No Firefox (bug 🪲 1481498 ).

Heavily commented as well.

#CSS #textEffect #cssGradient #blending #blendMode #code #coding #frontend #webDev #webDevelopment #bug #Safari #SafariBug #FirefoxBug #Firefox #CodePen #noJS #noSVG #mediaQuery #typography

#Development #Techniques
Write better CSS with modern CSS · New CSS features can help you streamline your code https://ilo.im/15ynzs

_____
#ModernCSS #Code #Optimization #WebDev #Frontend #CSS #CssNesting #CustomProperty #MediaQuery

#Development #Techniques
Detect JavaScript support in CSS · Pros and cons of using the ‘scripting’ media feature https://ilo.im/15ymv3

_____
#Browser #ProgressiveEnhancement #WebDev #Frontend #JavaScript #CSS #MediaQuery

#Development #Techniques
Add superpowers to your CSS variables · “We’re on the verge of yet another CSS revolution.” https://ilo.im/15y7gy

_____
#Browser #ProgressiveEnhancement #WebDev #Frontend #CSS #MediaQuery #StyleQuery #CustomProperty #CssVariable

#CSS #layout is difficult, arranging elements that are container queries (so their internal layouts and aspect ratios change too) on the page for different viewport sizes *and* aspect ratios such that the most important info is always in sight. Scrolling is not an option in this case.

It's not the code part of it I struggle with...

#cssLayout #mediaQuery #containerQuery #code #coding #frontend #webDev #webDevelopment

#Development #Techniques
The most underused CSS media queries · They help ensure your site works across all devices https://ilo.im/15xva6

_____
#Design #WebDesign #ResponsiveDesign #Device #Compatibility #WebDev #Frontend #CSS #MediaQuery

Did someone already experience a non-working breakpoint with (max-width: 839px) for the browser width 839px across all browsers – but only on Windows? 🤔

#CSS #Windows #Breakpoints #MediaQuery #Support

TIL about `@media (scripting)` query that can be used to detect if JavaScript is enabled in the browser using CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting

#CSS #MediaQuery

#Development #Explorations
Media queries in HTML video · How CSS media queries can affect HTML videos https://ilo.im/15xdjy

_____
#WebDev #Video #Accessibility #Frontend #HTML #CSS #MediaQuery

#Development #Introductions
CSS Media Query for scripting support · “A pretty great feature for progressive enhancement.” https://ilo.im/15xbjp

_____
#WebDev #MediaQuery #ProgressiveEnhancement #Frontend #CSS #JavaScript

Also, this is so silly, but when I saw this in a shopping complex in Umeå, my brain instantly went "media query" 🙃

#css #mediaQuery #funnies #frontend #webDev #webDevelopment #umea

#Development #Explorations
Re-evaluating px vs em in Media Queries · Is the common recommendation to use ems instead of pxs still valid? https://ilo.im/13esaa

_____
#Browser #BrowserCompatibility #Chrome #Firefox #Safari #WebDevelopment #WebDev #Frontend #CSS #MediaQuery #Zoom #FontSize #CssUnits #px #em #rem