Lmst

#MediaQuery

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

Shows the text "dreams" in narrow all caps on top of a leaves under blue light background. This text has a split line along the main diagonal. To the bottom left of this split line, the text is filled (white) and has no background. To the top right of this split line, the text is just stroked (white) with no fill and has a medium blue stripes horizontal background.

#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