Forem: Almaz Bisenbaev

Let’s Explore the New CSS “@function” Rule

Almaz Bisenbaev — Fri, 19 Sep 2025 22:17:17 +0000

If you've been keeping an eye on the evolution of CSS, you might have heard about this new feature that kinda turns CSS into a programming language (I’m exaggerating, but still).

The @function rule is a proposed addition to CSS that lets us define custom functions. It’s kinda similar what we call Mixins in Sass.

In this post I’ll try to show you how it works and what we can do with it. I’ll show you a few practical examples and use cases that highlight its potential to streamline your workflow and create more maintainable designs.

What is @function?

At its core, the @function rule is part of the CSS Functions and Mixins Module Level 1, a working draft from the W3C that introduces logic into CSS. Think of it as creating your own mini-functions that can accept arguments, perform computations, and return values. These functions are invoked similarly to custom properties (using a dashed name like --example-function()), but they go beyond simple variable substitution by supporting parameters, defaults and even conditional rules like @media.

Unlike built-in CSS functions such as calc() or clamp(), which are predefined, @function lets you define custom ones. This means you can encapsulate complex calculations or styles that would otherwise clutter your code or require external tools. It's especially useful for design systems where consistency and scalability are the key.

The rule is still emerging, but as of the end of 2025, it's starting to land in Chromium-based browsers. Firefox and Safari support is pending, so for now, it should be used with @supports or as a progressive enhancement.

How Does @function Work? A Quick Syntax Overview

Creating a function is simple and straightforward. You use the @function at-rule followed by a dashed name, optional parameters with types and defaults and a body that ends with a result descriptor specifying the output.

Here's the basic syntax:

@function --set-font-size(--size-small type(length), --size-large type(length)) {

  /* Let's say this is our condition */
  @media (width > 640px) {
    result: var(--size-small); /* We will return the first parameter for small screens */
  }

  result: var(--size-large); /* ... and the second one the above condition is not met */
}

To use the function:

.heading {
  width: --set-font-size(24px, 36px);
}

.quote {
    width: --set-font-size(16px, 18px);
}

This example may not look practical, but the point is that you can reuse the same function in different places many times.

Parameters can be of different types (e.g. length, color or more complex syntax via type()) and the function evaluates at computed-value time, inheriting context from where it's called. If arguments don't match, it falls back gracefully to an invalid value.

What We Can Do With @function

The real magic of @function lies in what it enables. Let’s see some examples.

1. Unit Conversions (e.g. pixels to rems)

Tired of manually converting units? Create a function to handle it automatically. This is great for accessibility-focused designs where rem units ensure better scaling.

@function --px-to-rem(--px type(length)) {
  result: calc(var(--px) / 16 * 1rem); /* Assuming 16px root font size */
}

h1 {
  font-size: --px-to-rem(32px);
}

2. Color Manipulations (e.g. opacity or tints)

Functions shine in color processing. Need a semi-transparent version of a base color? Define an opacity helper:

@function --opacity(--color type(color), --level type(number): 0.5) {
  result: rgb(from var(--color) r g b / var(--level));
}

.button {
  background-color: --opacity(#F00, 0.8);
}

This can extend to tinting, shading, or even contrast checks for better accessibility.

3. Fluid Typography and Scaling

One of the most popular use cases is fluid typography that scales smoothly with viewport size, clamped between min and max values.

@function --fluid-type(--min, --max, --scale) {
  result: clamp(
    var(--min),
    calc(var(--min) + var(--scale)),
    var(--max)
  );
}

h1 {
  font-size: --fluid-type(20px, 40px, 5vw);
}

p {
  font-size: --fluid-type(14px, 18px, 2vw);
}

This makes responsive text effortless, adapting to different screen sizes without media queries everywhere.

These examples barely scratch the surface. Imagine functions for random values, advanced math, or even integrating with custom properties for theme switching. The key benefit? Reduced repetition, easier maintenance, and more expressive CSS.

Browser Support and Considerations

As mentioned, support is limited but growing. It's available in Chrome 139+ and Edge 139+, with Android variants following suit. For broader compatibility, wrap usages in @supports selector(--my-function()) { ... } to provide fallbacks. Keep an eye on updates, this could become a staple in CSS soon.

The @function rule is poised to transform how we write CSS, bridging the gap between static styles and dynamic logic. By enabling custom computations and conditionals, it empowers developers to build more robust, scalable designs without external dependencies. Whether you're tweaking colors, scaling elements or handling responsiveness, it's a tool that encourages creativity and efficiency.

How to Write CSS in 2025 – Modern Features You Should Be Using (with examples)

Almaz Bisenbaev — Thu, 05 Jun 2025 07:03:47 +0000

CSS has come a long way. If you're still relying only on floats and basic media queries, you're missing out. Let's explore how to write much better, more powerful CSS today using features that are now widely available.

1. Subgrid (90% support)

Perfect for nested layouts where child elements need to align with the parent grid (card layouts, nested forms, or dashboards where alignment matters).

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.child {
  display: subgrid;
  grid-column: span 2;
}

2. Nesting (90% suport)

Yep, no more Sass for basic nesting. Native CSS nesting lets you group related styles, reduce repetition, and improve readability, without preprocessors.

.card {
  padding: 1rem;

  &:hover {
    background: #f0f0f0;
  }

  .title {
    font-weight: bold;
  }
}

3. Container Queries (86% support)

Style components based on their container’s size, not the viewport. This makes your components truly responsive and reusable.

.card {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .card-content {
    display: flex;
  }
}

4. :has() (92% support)

This is the holy grail of CSS - a parent selector. It enables conditional styling based on child elements, something that was impossible until now.

.card:has(img) {
  border: 1px solid purple;
}

5. :focus-within (95% support)

Highlight form groups when any child is focused.

.form-group:focus-within {
  outline: 2px solid #7f5af0;
}

6. @layer (94% support)

Tired of specificity wars? CSS layers (@layer) give you explicit control over which styles override others. Ideal for large codebases, design systems, or when using multiple CSS sources.

@layer base, components, utilities;

@layer base {
  body {
    margin: 0;
  }
}

@layer components {
  .btn {
    padding: 0.5rem 1rem;
  }
}

Sooo...

Modern CSS is modular, scalable and intelligent. You can build responsive components without JavaScript, write cleaner code without preprocessors and manage specificity with precision.

The easiest and fastest way to create a Custom Post Type in WordPress

Almaz Bisenbaev — Wed, 21 Aug 2024 23:27:11 +0000

There are two ways to create a Custom Post Type in WordPress (that I know of). The first one involves copy&pasting a little snippet of PHP code into your functions.php, and the second one allows you to do achieve the same with a few mouse clicks.

Let’s start from the first one.

Method 1: Creating a Custom Post Type Through functions.php

For developers who prefer a hands-on approach, adding custom post types through code is a powerful method. You can define custom post types by adding code to your theme’s functions.php file. Here’s a simple example:

function create_custom_post_type() {

    $labels = array(
        'name'               => __('Books'),
        'singular_name'      => __('Book'),
        'menu_name'          => __('Books'),
        'name_admin_bar'     => __('Book'),
        'add_new'            => __('Add New', 'book'),
        'add_new_item'       => __('Add New Book'),
        'new_item'           => __('New Book'),
        'edit_item'          => __('Edit Book'),
        'view_item'          => __('View Book'),
        'all_items'          => __('All Books')
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => false,
        'supports'           => array('title', 'editor', 'thumbnail')
    );

    register_post_type('book', $args);
}

add_action('init', 'create_custom_post_type');

Throw this piece of code into your functions.php and your custom post type called “Books” will show up in the admin menu.

This method gives you complete control over the post type’s configuration, but it requires familiarity with PHP and WordPress functions.

Method 2: Creating a Custom Post Type Using WP Power Tools

In order to avoid copy&pasting the same code through all my clients’ websites, I created this little plugin that allows me to do these repetitive tasks with a mouse mouse clicks, and I published the plugin on Github for everyone to use.

The source code of the plugin is here: https://github.com/almazbisenbaev/wp-powertools

When you install it, among other tools you will find a tool called CPT Manager. The tools does exactly the same as what you could achieve with the code above, just easier and faster.

If you tried out my plugin, don’t forget to give it a star on github, I would really appreciate it.

2 easy ways disable Gutenberg editor in WordPress

Almaz Bisenbaev — Sun, 12 May 2024 15:23:29 +0000

Gutenberg, the new editor that was introduced into WordPress since version 5.0 has a lot of cool features. But it in some cases, when you don’t actually need it, it still bloats your website with unused CSS and JS.

Here are the two easy ways to disable Gutenberg:

By pasting this PHP code into your functions.php:

// Disable Gutenberg on the back end
add_filter( 'use_block_editor_for_post', '__return_false' );

// Disable Gutenberg for widgets
add_filter( 'use_widgets_block_editor', '__return_false' );

add_action( 'wp_enqueue_scripts', function() {

    // Remove CSS on the front end
    wp_dequeue_style( 'wp-block-library' );

    // Remove Gutenberg theme
    wp_dequeue_style( 'wp-block-library-theme' );

    // Remove inline global CSS on the front end
    wp_dequeue_style( 'global-styles' );

    // Remove classic-themes CSS for backwards compatibility for button blocks
    wp_dequeue_style( 'classic-theme-styles' );

}, 20 );

Using PowerTools

PowerTools is a free WordPress plugin that is aimed to improve your productivity by solving some of the tasks that you encounter when building a website. I created it for myself and published the souce code on GitHub.

It allows you to disable Gutenberg just by ticking one checkbox:

All you need to do is download the plugin from GitHub, install it and find Gutenberg Disabler in the list of the tools that the plugin features.

It’s that easy!