Lmst

Lỗi layout CSS thường không phải do Flexbox hay Grid! Hầu hết chúng đến từ các vấn đề về đơn vị như 100vh trên mobile, em bị nhân đôi, hoặc px bỏ qua tỷ lệ chữ. Hiểu rõ về các đơn vị CSS có thể giúp bạn tránh nhiều phiền toái!

#CSS #Layout #WebDevelopment #Frontend #Programming #BugFixing
#LỗiCSS #PhátTriểnWeb #FrontendDev #LậpTrình #CSSUnits

https://www.reddit.com/r/programming/comments/1q8n7vg/most_css_layout_bugs_are_unit_bugs/

#Development #Techniques
Simple full-bleed and breakout styles · Modern CSS solutions for a classic problem https://ilo.im/1682wb

_____
#ModernCSS #CssGrid #CssUnits #FullBleed #Layout #WebDev #Frontend #HTML #CSS

#Development #Techniques
Transition to the other side · A little CSS magic with container query units https://ilo.im/167m1o

_____
#ModernCSS #CssUnits #CssCalc #Transitions #Animations #WebDev #Frontend #CSS

#Development #Approaches
The best CSS unit for spacing · “We don’t have to choose between px and rem.” https://ilo.im/1673zo

_____
#CssUnits #CssClamp #CssCalc #CustomProperties #WebDev #Browser #Frontend #CSS

#Development #Techniques
Designing for user font-size and zoom · Using modern CSS units and math functions https://ilo.im/165luy

_____
#ModernCSS #Typography #FluidType #Fonts #Zoom #Browser #WebDev #Frontend #CSS #CssUnits

#Development #Techniques
The CSS height enigma · Unraveling the mystery of percentage-based heights https://ilo.im/163u5k

_____
#Layout #CssUnits #CssGrid #CssFlexbox #WebDev #Frontend #HTML #CSS

#Development #Introductions
The CSS shape() function · It brings responsive shapes to modern CSS https://ilo.im/163c8b

_____
#ModernCSS #Shapes #CssCalc #CssUnits #Design #VisualDesign #WebDesign #WebDev #Frontend #CSS

#Development #Techniques
Full-bleed layout with modern CSS · Edge-to-edge sections with minimal code https://ilo.im/1621v3

_____
#ModernCSS #Layout #WebDev #Frontend #CSS #CustomProperties #CssUnits #CssCalc

#Development #Previews
New values and functions in CSS · Long-desired features are making it into the specs https://ilo.im/1605ka

_____
#ModernCSS #CssFunctions #CssUnits #Specification #Browser #WebDev #Frontend #CSS

If you want a fixed aspect-ratio element that always touches either the horizontal or vertical edges of its flexible size and aspect ratio wrapper *which does not coincide with the viewport*, you can make the wrapper a container and use container query units.

Live test on @codepen https://codepen.io/thebabydino/pen/ExzbVmP

#CSS #cssLayout #layout #container #containerQueries #containerQuery #cssUnits #code #coding #frontend #web #dev #webDev

The CSS code used to achieve this:

```
html, body, div { display: grid }

html { min-height: 100% }

body {
grid-gap: 1em;
grid-template-columns:
repeat(auto-fit,
minmax(min(100%, 16em), 1fr));
font-size: clamp(.625em, 1vw + 1vh, 1.5em)
}

.wrap {
container-type: size;
box-shadow: 0 0 0 1px, inset 0 0 0 1px
}

.box {
--r: 16/9;
place-self: center;
width: min(100cqw, var(--r)*100cqh);
aspect-ratio: var(--r);
background: crimson;
}
```

As exciting (and useful) all the new #CSS units are, it looks like things working as expected with them isn't a thing for now.

Safari has problems with `lh` https://bugs.webkit.org/show_bug.cgi?id=267185 and doesn't seem to support `cap` (at least from what I've tested in Epiphany).

#bug #cssBug #Safari #SafariBug #code #coding #cssUnits #frontend #webDev #webDevelopment

🔴 Learn These Viewport-Relative CSS Units (100vh, 100dvh, 100lvh, 100svh)
by George Martsoukos at @envato
#viewport #CSSunits #ViewportUnit #vh #dvh #lvh #svh

https://webdesign.tutsplus.com/learn-these-viewport-relative-css-units-100vh-100dvh-100lvh-100svh--cms-108537t

Red pink text on light pink background:
Learn These Viewport-Relative CSS Units (100vh, 100dvh, 100lvh, 100svh)

#Development #Approaches
Why you should use px units for spacing techniques · The drawbacks of using relative units for margin, padding, and the like https://ilo.im/15fman

_____
#WebDev #WebDesign #ResponsiveDesign #Frontend #CSS #CssUnits

#Development #Guides
An overview of CSS sizing units · Size units are vital to crafting optimal cross-media/device layouts https://ilo.im/14k8tr

_____
#CssLayouts #Browser #WebDev #Frontend #Viewport #CSS #SeizingUnits #CssUnits

#Development #Introductions
New CSS viewport units · Say hello to the small, large, and dynamic viewport units https://ilo.im/14209x

_____
#CSS #CssUnits #UseCases #WebDevelopment #WebDev #Frontend #Demos #Viewport #svh #lvh #dvh

#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

#cssUnits

Client Info