Should i use @container instead of @media?
Hi, if do not care about browser support should i completely discard @media usage ?
225 Replies
you use the tool you need
container queries can't do everything that media queries can do
tech they can
everything? even the
prefers-reduced-motion stuff?
and media print?okay i see
look smart ass
😄
you use grid layout frequently or flex?
not wrong but I think in this question we can assume they meant for @meda screen 😄
resizing elements for printing is a valid usecase
both, but mostly Grid for layout and flex to flex items
"flex to flex items" can you explain what do you mean by that?
or example
for example, tags
breadcrumbs
oh i see
maybe even a menu in the header
when I want children to become their max-content size by default and align next to each other and maybe need wrap
things that don't fit in a grid, usually
would you use a overlay grid layout to overlay something or absolute positioning?
grid
grid and absolute is a thing too 😉
depends on the intention
okay i see
grid with position absolute solves a lot
we are getting offtopic though 😄
:))
i just shoot my questions
XD
@container can be used like @media screen was my orignal point
yea i think mostly @container is enough
yes, think of it as a sub-set of
@media
but only applies to a parent element, instead of the entire screen
or entire presentation deviceyou can make it just work off the screen if you don't set a parent container
yeah, but that's not a less supported
@media query, in the endthis only can be true if we can emulate completely @container behaviour inside of media which is i am not sure
well, with some effort, you sorta-ish can-ish
if do not care about browser support
oh, good point
guys
lastly
but seriously, using both is fine
omg i forgot my question XD
yea don't fall into this trap of container vs media.... grid vs flex....
nvm
Use all the tools
but layout should be well defined beforehand
otherwise needs refactoring
and grid and flex works completely different
exactly
different tools for different results and situations
btw my last question for my excuse you would prefer tricky linear interpolation way to implement font sizing only one line clamp() method or just traditional media query way?
yes
not wrong but 🤷♂️ people tend to trap themselves into only using flex for some odd reason. Which has done layout for years, thing is we have better layout tools now 😄
yes, and then i see people trying to make things align perfectly with flex...
Also how you build a page layout really #depends on the design restrictions, skill of using the right tools to overcome or work with those restrictions while also making things responsive xD
you know, align stuff in a grid, but with flex
clamp for LARGE headings, media query for rest
most the times I never change the font size
16px looks good on mobile and PC and long as you are respecting user font choice with rem then all is well in the world
what about user preference is not 16px?
(but don't set it to 16px, use 1rem)
That is me personally though. If I need it to change its typically one time... media query works just fine. I don't like fonts that change on screen size, I find lots of times it just looks worse.
You can also do container query to make sure font fits the parent.
what is the problem with that?
it's an absolute horrible experience
it's like using an hammer to screw a piece of plastic to a metal sheet
align-items: start? or something
that is default 😄
no i mean when use align-items: start it align perfectly what is the problem
or other value
more its hard to align same flex items on the page with lets say other flex items
not the child in the parent
^
it's like trying to make everything have somewhat the same size
like how you get with grid
align-items: scretch?
i really do not get the point XD
We are talking bigger picture alignment
not the flex child properties
Kevin Powell
YouTube
No, Flexbox isn't "good enough"
I love flexbox. It's a fantastic tool. But there is a reason we have two layout tools, and it's because it can't do everything, and some solutions with it are overly complicated. We have grid for a reason, and it's not as complicated as it might seem at first.
🔗 Links
✅ Learn Grid the easy way: https://youtu.be/8QSqwbSztnA
✅ Flexbox doesn't ...
Maybe teacher Kevin can help
you mean container inside bunch of flex containers?
like if you want to have a zone with cards or something
okay i will watch
and you want the cards to be the same size
ouu i see
but you said not child?
Flex children by default are max-content
still it should be inside of some container
yeah, but doing it with flex is horrible
becomes magic numbering almost
with grid, it's just
grid-template-columns: 1fr 1fr 1frokay you mean when want structural thing which every thing defined before hand sizes then use grid
and there you go, 3 columns
lol I'm not the only one that find repeat() more truble than typing out a few 1fr's 😄
it's also shorter
granted you get into repeat(5, 1fr) I might 😄
btw guys i can animate both template-columns and template-rows at the same time?
repeat with a variable is amazing
you can animate multiple properties at once
if it will look good is another matter
it is a little bit tricky to animate grid-template for some reason
some times it doesnt work
I do not still get it
animating template is rather "new" I haven't played with it enough yet, its got quirks I'm sure.
it's the same as animating display
still pretty new and funky
yea
then how people do layout animation before?
almost nobody does that
it is popular these days
javascript help 😄
i've almost never seen people do it
i can't even give you an example of an animating layout
maybe masonry, or what it is called
there are some libraries for example it shows images in grid and when move grid cell the grid cells of container animating. they use js for that?
but that's it
Lots of animations are based on transition matrix and absolute position.
just #depends what its doing
You are talking about FLIP its a specific pattern to record state and use that to animate correctly.
We totally sent this thread into the either now 🤣
David Khourshid
CSS-Tricks
Animating Layouts With The FLIP Technique | CSS-Tricks
User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this - as Nick Babich said,
old but probably still valid.
it looks nice
The whole Flipping.js thing I would avoid and at that point (it uses gsap) I would just use GSAP.flip
only thing I could see that is out of date. (gsap didn't have flip plugin yet or for free)
EXACTLY THANKS
personally, i would use a dialog and deal with the lack of animations
Fun fact I use GSAP.Flip to faux ViewTransition API feels 😄
which is a good case for using CSRouting
>.>;;
I do not do advanced animation thing but can people avoid GSAP?
or it does so much thing?
You can avoid anything you want.
you just have to implement it yourself
I mean it is extremely hard or not?
GSAP is the leader in web animations, I like it but there are others and CSS animations are become much better.
for example i am pretty sure view port thing can be achieved Observer very easily
IO is harder to use than GSAP (which uses it under the hood) 😄
that is just imo
try it
but! CSS scroll animations look to be pretty easy too
easier than IO too
what do you mean IO?
IO isn't really hard... its just annoying when you want to do anyting complex
Intersection Observer
obeserver returns 0..1 value to indicate animation progress
I know how it works 😄
again I'm just saying you want complex trigger animation IO is limited imo
i use intersection observers to pause animations in css, or videos outside the viewport
it's a much better use case
yea that use case I'm sure it works great 😄
"pause animations in css" how you do that? iterating over elements?
you use it for specific elements or generally all the website?
you have access to css animations in JS
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
you set that property to
paused and doneou i know this but this property also manage states for us?
oh TIL
animation paused
it's paused, not stopped
i mean when i play it plays exactly wheere it remained
oh very cool
but very weird that browser does not do that for us
why would it?
why animate something user does not see?
i think default should be reversed
what if you want the animation to keep running off screen?
it should be something we can do if really we want
you can, with intersection observer and changing the play state
https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations I was thinking you used something like this
ive never used that
its 🔥
i've never had the need to
everything i've animated is very easily paused with that single property
new Web Animations API is pretty slick
im not much for animations 🤣
yes I know 🥲
but sometimes, they are the best tool
i used it for a carousel
but maybe your element has multiple animations
no, usually just 1
then how you know which animation you wanna stop
i think it pauses all
yea probably
i think it is usefull when u do animations programatic way
animation-play-state: paused, running, running; <-- you can do thisbut this is very weird
and it pauses the animations set in
animation-name
which can have multiple names tooi think method is better if multi animation
it might be, i've never tried
i barely use animations
what i use more is transitions
that is another topic difference between transition and animation
keyframes need love
can you explain?
animation = keyframes = multiple transitions?
that is debate based on context. In this sense though its keyframes vs transition
like hover is a transition
but in theory same thing can be done with animation keyframes
0%, 50%, 100%
sure
yes
it's a pretty terrible option, but yes
keyframes get timelines I might use them more 🥲 but yea any complex animations I'm reaching for GSAP sorry not sorry (unless for some reason I really need them to work without JS)
you need to remember to set and remove the animation in EVERY SINGLE STATE you want to animate
for transitions, all you need to set is the transition style and done
yeah, i can see why you would use it
idk that last part is kinda confusing imo
that sounds like it was made by ai
but yea works
yea it does sound like AI 🤣
stackoverflow
i would never say that a transition is an animation
that's like saying a car is a tyre
maybe under the hood it uses same technique
it very likely does
guys btw canvas uses pure CPU? or can use GPU as well?
i would say that an animation is just a set of transitions that you can define in a timeline
yes
that's the correct answer: yes
canvas can be 2d and 3d
which means, it can be driven by the cpu and gpu
and since it is using (sorta-ish) the same tech as opengl, with webgl, it can also use the cpu or gpu for 3d
so, in short: yes
it depends on context it think. when it use webGL context utils GPU but not sure for other default api to draw
webgl can be executed by the cpu too
no way
100%
sure
if you don't have a gpu with 3d acceleration, yes
openGL is GRAPHICS API which talks with GPU driver
no way
if you do not have hardware which supports openGL via driver then it just crush when you wanna use openGL
you can do software rendering
it's as crappy as you can imagine, but it's possible
but software rendering is completely different implementation
we cannot use same webGL code in software rendering
you can
how would you run shader?
in CPU
mesa softpipe is a software rendered, and it can run the openfl stuff in the cpu
you don't want to run shaders on a cpu
but if you try, im sure it will run like crap
maybe it just uses some library translates openGL calls to something
webGPU ❤️
I think it is not possible even you wanna
1000k Vulkan code to draw triangle for +=10FPS
no thanks
I mean it is going to be the successor
solves those issues too
I do not understand they just f** everything
Vulkan cannot replace openGL
Vulkan is supposed to be low level thing but openGL is accesible
it is something like they wanna replace JavaScript with Assembly
you mean, webassembly?
apple completely discard openGL last years
na thats not a fair comparison
its still a JS API for one
by the way, apple does support vulkan and their metal api
WASM is not working with the browser its working against it 😄
just so BE devs can have their way
AYO
analogy.
openGL/WebGL = Javascript
Vulkan/Metal/DirectX12 = Assembly
yeah, but i don't think it is a replacement but an addition
companies tries to get rid of openGL
it allows rust to run in the browser
rust in browser even worse than python in browser
I mean I like the looks of Blazor but it goes against my core being
how about running a php server in the browser, and host wordpress on it?
Cause I rather use frameworks that leverage the browsers
i believe that webassembly is a nice gimmick
if php can run back-end and front-end i would use it
it can, but it's a terrible idea
it uses http methods to call serverside thing
i do not mean that
pure client side code
you mean, something sorta like laravel livewire?
nah it uses http also
they all tries to communicate with server
i mean something like javascript
recently analyzed laravel source code. that is terrible in some aspects
taylor tries to create something cool rather than simple
the source-code of libraries and frameworks is usually full of unholy code
livewire is like exactly that
Also you want something that can communicate with the server 😄
Its how you can do fun things like progressivly enhanced forms
like they use seperate blade directives for true and false logic
no
wait
yuck, blade
those are different conditions
you can just use
@ifou my bad
blade does not allow expression inside of @if
@if($s.count() === 0)
...
that's because you're doing it wrong
can't you also just use Twig if you wanted?
I though Laravel let you change template langs?
probably does
smarty is easier
I'm sure it does
there are macros
what you have can be read as:
causes a Fatal error: Uncaught ArgumentCountError: count() expects at least 1 argument, 0 given in ...
you have to use @if(!count($x))@if(count($s) === 0)
...
LOL
that's calling the variable
$countis that valid?
expression inside @if?
yes
then why laravel has @isset
shortcut
or even @auth
to make sure you don't fuck up authorization and/or authentication
it has shortcuts but also macros
i do not like it
yeah, but it has it's uses
i don't like the language either
but
@auth is EXTREMELLY useful
@isset is just convenience
instead of @if(isset($value)) you use the @isset
this merge behaves different when key is "class" or "style"
because class tries to keep everything separated by space
laravel does some magic to try to keep that
GitHub
view/ComponentAttributeBag.php at master · illuminate/view
[READ ONLY] Subtree split of the Illuminate View component (see laravel/framework) - illuminate/view
Hey at this point I really should be enforcing a new post
We have gone from the OT to like 3 other things now xD
you're right, this is so off-topic it is in another continent
facts
maybe in another castle too
thanks
bye