CSS by T. Afif 

💡 CSS Tip!

Ready to start using style queries and if()? Which of the following syntaxes do you think is the correct one? Spoiler: Both of them are valid!

https://css-tip.com/if-trick/

Learn the difference between them and when to use each one. It's the key to correctly using these features.

#CSS #HTML

Feb 25 at 1:16pmWeb
Show threadCSS by T. Afif Feb 25

Without testing the code below, what color will each box have?

Read my last post if you want to understand the correct answer (you will be surprised!)

https://css-tip.com/if-trick/

#CSS #HTML

Show threadkaiserkiwi Feb 25
@css My first thought would that everything would be red. For the last one I'm not completely sure. But I think it should be red.
Show threadCSS by T. Afif Feb 25

@kaiserkiwi now test and see if your intuition is correct 😉

Then read the article to clear any confusion.

Show threadAdam SmithFeb 26
@css I literally just finished reading it!
1. green
2. red
3. red
4. green
Show threadCSS by T. Afif Feb 27

Can you guess which one is a valid syntax for style queries?

Think about it, then read my last post to find the correct answer (and understand why you got it wrong)

https://css-tip.com/if-trick/

#CSS #HTML

Show threadAmelia Bellamy-RoydsFeb 25
@css Oh, that's an important distinction. Makes perfect sense once you understand it (= for mathematical comparisons, : for CSS values), but it would definitely trip someone up when trying to adapt a demo!
Show threadCSS by T. Afif Feb 25

@AmeliaBR but I am afraid most will be using the ":" notation as it's the one used to introduce the feature (and has a better support) and we already have a ton of demos already online so it would be hard to reverse the trend.

I will try to push the "=" syntax as much as I can 😅