Forem: Aslam Shah

Inline if() in CSS 🤔: What You Need to Know About This Upcoming Feature

Aslam Shah — Mon, 01 Jul 2024 15:32:30 +0000

Last week, the CSS Working Group gathered in Spain, and there was some exciting news

🥁

they agreed to add an inline if() function to CSS.

This idea had been bouncing around for a while, but they finally managed to pin it down to an MVP that could be implemented quickly. After some friendly chats with implementers and putting out a solid proposal, they reached a consensus. It's a significant leap forward for CSS, adding some nifty new tricks to the toolkit 🎉.

Lets see how this will work ( according to the proposal ):




.my-element {
    color: if(
        style(--status: active) ? var(--color-active-30) :
        style(--status: error) ? var(--color-error-30) :
        /* Add other statuses here */
        var(--color-default-30)
    );
    background-color: if(
        style(--status: active) ? var(--color-active-95) :
        style(--status: error) ? var(--color-error-95) :
        /* Add other statuses here */
        var(--color-default-95)
    );
}

Based on the --status variable, we can conditionally change the css properties in a single line.

You can also use it using pre defined variables.



:root {
    --xl: media(width > 1600px);
    --l: media (width > 1200px);
    --m: media (width > 800px);
}
/* usage */
border-width: if(
    var(--xl) ? var(--size-3) :
    var(--l) or var(--m) ? var(--size-2) :
    var(--size-1)
);

Browser Support:

Don’t get too excited just yet—it'll likely take at least 1-2 years for this to make its way into our browsers. So, while the future of CSS looks bright, we’ll need to be patient 😀!

Stay tuned and follow me for the latest updates and tips on new web development features, so you'll be the first to know when the future of CSS and other web technologies lands in your browser!

Aslam ShahFollow

Creator of https://codedmails.com

Photo by Cam Adams on Unsplash

There is now a better way to use @font-face for variable fonts

Aslam Shah — Fri, 14 Jul 2023 12:57:09 +0000

When it comes to using variable fonts on the web, there's a newer way to do it.

@font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("BitstreamVeraSerifBold.woff2") format(woff2) tech(variations);
}

Here is the old ( still working ) syntax:

@font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("BitstreamVeraSerifBold.woff2") format("woff2-variations");
}

When using variable fonts with @font-face, it is important to note that the syntax has changed. Instead of using strings, the recommended approach now is to use keywords like woff2, opentype, truetype, woff, and others within the format() function.

It is necessary to consider the font's capabilities such as variable font, color font etc. To determine if a browser supports these font technologies, one can utilize the tech() function. By specifying tech(variations), it ensures that the font file will only be loaded if the browser supports variable fonts.

However, it is worth noting that the new syntax is not yet widely supported. Therefore, it is generally advisable to stick with the old version for now. However, if targeting newer browsers specifically, it may be appropriate to consider updating to the new syntax.

Aslam ShahFollow

Creator of https://codedmails.com

Text Balance in CSS is coming 🔥

Aslam Shah — Wed, 26 Apr 2023 07:19:45 +0000

When it comes to designing a website or application, balancing the text is an essential aspect. It not only improves readability but also adds to the overall aesthetic of the content. CSS provides various properties to achieve this balance, one of which is the text-wrap property with the value balance.

The text-wrap property is used to control how the text is wrapped within its container. When the value of the text-wrap property is set to balance, it ensures that the text is distributed evenly across multiple lines within the container. This results in a well-balanced block of text, without any uneven gaps or breaks.

Let's take a look at an example to better understand how the text-wrap: balance property works.

<h1 class="heading text-balance">This is a heading that will be balanced</h1>
<h1 class="heading">This is a heading that wont be balanced</h1>

Here, we have a heading. To apply the text-wrap: balance property, we need to add the following CSS code.

.text-balance {
  text-wrap: balance; <======
  background: #f4f4f4;
}

In the above CSS code, we have set the width of the heading to 300 pixels, and added the text-wrap: balance property to the text-balance class. This ensures that the headline is distributed evenly across multiple lines, without any uneven gaps or breaks.

It's important to note that the text-wrap: balance property is not supported in all browsers. However, it is supported in Chrome Canary.

More information can be found here.

If you want to get updated on similar topics, don't forget to follow :)

Aslam ShahFollow

Creator of https://codedmails.com

An extension for Google Meet Reaction UX?

Aslam Shah — Tue, 11 Apr 2023 09:15:20 +0000

If you use Google Meet for online meetings, you may have experienced the frustration of accidentally clicking on the "raise hand" button ✋ instead of the reaction button 😃. This can be embarrassing and disruptive, especially if you are in a large group or a formal setting.

I was in the same situation a couple of times, so to fix that issue, I created a Chrome extension called "Move Reaction Button"

"Move Reaction Button" is a free and easy-to-use extension that changes the position of the reaction button in Google Meet. Instead of being next to the "raise hand" button, it moves it to the left corner of the buttons, and I also added a colored background to make it more visible. This way, you can express your emotions without unintentionally raising your hand.

There are no special permissions needed for the extension to access the content of your page.
I hope this will be helpful for you.

Feel free to add suggestions in the comments.

Finally accent-color in CSS

Aslam Shah — Wed, 05 Apr 2023 10:20:43 +0000

If you're a web developer, you're likely familiar with the role of CSS in defining the visual style of a webpage. One key aspect of CSS is the use of color, and recently a new accent color property has been added to the CSS specification.

The accent-color property is a new addition to CSS that allows you to specify a single color that can be used as an accent throughout your website.

Currently accent-color only works on Checkboxes, Radio Buttons, Range and Progress elements.

To use the accent-color property in your CSS, simply specify the desired color value using any valid CSS color syntax. Here's an example:

input {
  accent-color: #007bff;
}

It's worth noting that the accent-color property is still relatively new, and surprisingly the support is very good.

More info can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color

Theming Angular Material Components - Introduction

Aslam Shah — Mon, 29 Aug 2022 15:06:00 +0000

In this series, I will explain how to customize the Angular Material theme, components in particular ( that's usually the most irritating part ) and your own components using the Angular Material Way 💅 . I hope this series will help, new developers or anyone who has struggled, to get a better understanding and perspective on the topic.

Why am I doing this series?

I have been using Angular Material for a long time and every time I need to do some adjustments to the angular material components, in the past I usually end up ( mostly ) overriding CSS properties in stylesheets instead of customizing the sass variables and generating the component design using the sass mixins available to us ( which I have stopped doing a while ago 😉 ) to have a more systematic, recommended and scalable way.

Here is a simple example you might relate to:

Let us say we want to increase the font size of the mat-paginator component, as seen by the red border in the picture above, we have in my opinion 2 ways to increase the font size.

a. Directly changing the css property for the specific element:

.mat-paginator { font-size: 30px }
/* you might need to add !Important /*
/* depending on where you add this css or the ViewEncapsulation method you use.*/

b. Updating the Sass Map provided by Angular Material:

This is the long ( ~~correct~~ better ) way where you define a typography variable called $caption and then pass it to the angular-material-typography, as this variable is used by the components in its sass definitions, also along the process initiating the mat-core() mixing, using the correct variables defined in the sass-map and lastly passing everything to the mat-light or mat-dark theme mixin (ignore the order of the steps at the moment). This process already seems to be a little complicated just to change the font-size but once you understand the process, the rest becomes very easy.

/* not complete example, we will visit it example in full detail in the series later */
...

$custom-theme: mat-typography-config(
  $caption: mat-typography-level(14px, 16px, 400),
);
@include angular-material-typography($custom-theme);

....

As much as it's easier to do it the first way, it is not recommended to directly change these values as you will end up with a lot of hacks to make the design customizations you want. And if you are going to use other material components ( which you will indeed end up doing ), it will be difficult for new and other team members to understand it if you have a decent codebase.

Also, the current guidelines available on the Angular Material website are not clear enough or detailed enough and most of the StackOverflow posts use a dirty hack to fix the design using !important most of the time.

So if someone is starting a project then I would recommend doing it in a way that it is scalable and easy to maintain aka the Angular Way 😌.

Follow for upcoming articles in this series. And so comment if you have struggled with Angular Material components and share the challenged you have faced.

See you in the next article.

🔥 What does the css parent selector :has in for us?

Aslam Shah — Wed, 06 Jul 2022 13:37:23 +0000

:has is a parent selector pseudo-class*. It lets you change the parent element properties if it has (:has) a specific child or a specific element following it.

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.

Here is a simple example of :has pseudo-class:

.parent:has(.child){
  color: blue;
}

What this means is that if the .parent element contains .child element, then change the text color of the parent element to blue. This was not possible to implement with css before. But thanks to :has selector, now we can add this logic directly in css and modify .parent based on what it :has as a child.

At the time of writing this article :has pseudo-class only works in Safari 15.4 and in Chrome Canary. Can i use

Example

I am using a screenshot here so that you don't have to open the codepen in compatible browsers ;)

Empty Button vs Button with an SVG

Instead of having 2 variations of buttons with or without an icon, you can simply use the :has attribute on the parent.

button:has(svg) {
  background: #bd3c91;
}

There is lot more to :has selector. If you are interested in more usecases, let me know in the comments and i will add more practical usecases.

Aslam ShahFollow

Creator of https://codedmails.com

Why 🗜️ 👈 is the one of the most powerful css function?

Aslam Shah — Sat, 16 Apr 2022 20:26:45 +0000

Fun fact: 🗜️ is the emoji for clamp according to emojipedia

Lets talk about css `clamp()` function.

If you have ever wondered how you can define range to a css property e.g minimum, preferred or/and maximum value, then clamp is the go to function.

Here is how you can use.

clamp(MIN,PREF,MAX)

You give a minimum value, a preferred value and a maximum value.

One of the most common use of clamp() is in creating fluid/responsive typography. Your font-size will change based on the viewport size without writing any additional media queries. You can give a minimum/maximum font-size but everything in-between will be fluid if you use viewport units like vw or vh;

Here an example ( try to resize the result tab )

You can use clamp function for lengths, percentages, angles etc. You can read about it more here.

Aslam ShahFollow

Creator of https://codedmails.com

How to reset an elements inherited properties using css?

Aslam Shah — Wed, 06 Apr 2022 09:26:31 +0000

If an element is inheriting alot of css properties you can reset all properties to their unset state at once using all: unset property.

This can come handy if your element is inheriting alot of properties due to css frameworks, custom css or any third party css imports.

According to MDN:

The all shorthand CSS property resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.

You can read more about all property here

Aslam ShahFollow

Creator of https://codedmails.com

Why z-index doesn't work all the time 🤯 ?

Aslam Shah — Thu, 31 Mar 2022 12:23:00 +0000

If you have struggled with z-index you are not alone.

Look at the code snippet below:

The circle div has a z-index of 99999 but it is still showing under the header which has a z-index of 2. why is this happening? Should circle be on top as it has the highest z-index?

z-index doesn't simply place element on top of lower z-index or no z-index items. There is a logic to it. If you understand this logic, then next time when you add a z-index property, you will know where to put it and why.

Lets dig into it:

z-index is based on the stacking context of the HTML elements. Stacking context simply means how the elements are stacked in the HTML tree whether the elements are in same stacking context or not e.g in the code snippet above the stacking context of header and main is different than circle. We can create new stacking context as soon as we add z-index properties to the elements.

There are also many other ways of creating stacking context. If you want to dig deeper you can read about it here

if we add z-index to header element then it will create a new stacking context comparing main and header. The circle z-index will have no effect as it has its own stacking context inside the main element's context. But if we create a z-index on the circle div then the context will be between it siblings ( if any ).

In order to solve the problem, all we need to do is remove the z-index from the main which will remove the new stacking context. Now it will simply be header and then circle in terms of stacking context.

I hope you enjoyed this article. Follow for more css tips and tricks.

Aslam ShahFollow

Creator of https://codedmails.com

💡 Animate newly added HTML elements with CSS

Aslam Shah — Tue, 01 Mar 2022 16:00:22 +0000

We all have been in a situation where we need to animate newly added HTML elements. We tinker with timeouts, initial state or any other scripting logic to add/remove classes etc.

If you want a simple solution, here is one for you. It only uses a single animation keyframe to take care of the newly added elements. CSS Animations with take care of the default state based on the initial element styles.

@keyframes animate {
  100% {
    opacity: 1;
  }
}

You can also play with the properties using css transforms to achieve the animation you need.

In the example below you have 2 versions.
Normal Item which uses opacity to create a fadeIn effect while the Fancy Item also has some transform properties attached to it.

Enjoy! :)

A css tip to remember

Aslam Shah — Mon, 17 Jan 2022 14:47:48 +0000

Hey everyone! 👋

Here is a quick tip you might find helpful while writing css.

You might be surprised how css can confuse you doing something very simple as positioning an element.

The order by which you use the properties for a css transform property can give you different results.

e.g Using a translate and rotate in a transform property together might give you different results based on what order you use them.

Checkout the codepen below:

Enjoy :)

Cover photo by bruce mars on Unsplash

Forem: Aslam Shah

Inline if() in CSS 🤔: What You Need to Know About This Upcoming Feature

Browser Support:

Aslam ShahFollow

There is now a better way to use @font-face for variable fonts

Aslam ShahFollow

Text Balance in CSS is coming 🔥

Aslam ShahFollow

An extension for Google Meet Reaction UX?

Finally accent-color in CSS

Theming Angular Material Components - Introduction

Why am I doing this series?

🔥 What does the css parent selector :has in for us?

Example

Empty Button vs Button with an SVG

Aslam ShahFollow

Why 🗜️ 👈 is the one of the most powerful css function?

Lets talk about css clamp() function.

Aslam ShahFollow

How to reset an elements inherited properties using css?

Aslam ShahFollow

Why z-index doesn't work all the time 🤯 ?

Aslam ShahFollow

💡 Animate newly added HTML elements with CSS

A css tip to remember

Lets talk about css `clamp()` function.