How to Use CSS Custom Properties

Using CSS variables starts with defining them. This is usually done within the :root pseudo-class, meaning the variables are available globally across your HTML document.

:root {
    --primary-color: #4CAF50;
    --secondary-color: #ff6347;
}

Here, --primary-color and --secondary-color are custom properties holding color values that you can use throughout your CSS. Once defined, you can use these variables anywhere in your stylesheets by referencing them with the var() function.

body {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

If you are not catching it… Your style code only needs to reference the color variables, and you only have to change the color values in one place!

What are all of the CSS Variables? What are the limitations?

CSS variables can hold almost any value you typically write directly into your CSS rules. This flexibility allows for powerful theming and reusability across your stylesheets. The primary limitation is that CSS variables cannot store CSS selectors or entire CSS rules; they are meant for values only.

Color Values

• Hexadecimal (e.g., #ff6347)
• RGB (e.g., rgb(255, 99, 71))
• RGBA (e.g., rgba(255, 99, 71, 0.5))
• HSL (e.g., hsl(9, 100%, 64%))
• HSLA (e.g., hsla(9, 100%, 64%, 0.5))
• Named colors (e.g., red, blue)

Dimension Values

• Length (e.g., 10px, 2em, 5vh)
• Percentage (e.g., 50%)
• Viewport-based lengths (e.g., vh, vw, vmin, vmax)

Font and Text Values

• Font sizes (e.g., 16px, 1.5rem)
• Font families (e.g., "Times New Roman", Arial)
• Text shadows (e.g., 1px 1px 2px black)
• Font weights (e.g., bold, 700)

Timing Values

• Duration (e.g., 0.3s, 200ms)
• Timing functions (e.g., ease-in, linear)

URLs and Image Values

• Image URLs (e.g., url('path/to/image.jpg'))
• Gradients (e.g., linear-gradient(to right, red, blue))

Miscellaneous and Custom Values

• Border details (e.g., 1px solid black)
• Box shadows (e.g., 10px 10px 5px grey)
• Transformations (e.g., rotate(45deg), scale(1.2))
• Transitions (e.g., all 0.3s ease)
• Grid template areas (e.g., 'header header header')
• Arbitrary numbers (e.g., 300, 0.5), often used in calculations or for defining custom scales
• Custom values of any combination of strings or values (e.g., --custom-shadow: 2px 2px 5px rgba(0,0,0,0.5);)

When to Use CSS Custom Properties

Theming: CSS variables make theming a website incredibly straightforward. You can change your site’s theme by altering the values of your variables.

:root {
    --primary-color: #333;
    --background-color: #fff;
}

[data-theme="dark"] {
    --primary-color: #ccc;
    --background-color: #222;
}

body {
    background-color: var(--background-color);
    color: var(--primary-color);
}

Responsive Design: You can use CSS variables to streamline responsive designs. For example, you can define font sizes that change with the viewport size.

:root {
    --base-font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --base-font-size: 14px;
    }
}

body {
    font-size: var(--base-font-size);
}

I’m “with it”.

Discovering CSS variables has opened up a new dimension in CSS for me and is helping me keep up with the times.

Please share what you learn as you learn it. We are in this together.

My Short History of Using Web Browsers

My first web browser was Lynx. My first internship required its use. Lynx is a text-only way to view the web. You navigated by following hyperlinks and browsing through walls of text. Imagine Lynx with ChatGPT?

My first full-featured web browser was Netscape Navigator. I still remember opening it for the first time and seeing the web with HTML with text, text animations, and images. Netscape Navigator was installed on all of the computers in the Penn State computer labs.

Unannounced to me a war broke out between Netscape and Microsoft. Internet Explorer was Microsft’s answer to using the web and they made it their mission to be number one. I learned about IE when I bought a new computer back in 1996. I used a tax return to buy a PC from a local computer shop on campus. This computer came with a CD-ROM of Internet Explorer. Microsoft Internet Explorer was JAVA compatible!

IE became the bane of my existence. I wrote webpages and web applications for a living and IE always had a special way of rendering HTML that required a lot of extra code to handle quirks and interpretations of markup language. The idea of cross-browser compatibility took a while to catch on. At some point, Firefox emerged, rendered webpages accurately, and became the standard in how the HTML standard should work. And then everything changed in 2008 when Google released the Chrome web browser. Chrome swept the internet. On every PC I touched, I used IE to download Chrome. Chrome rendered HTML, CSS, and javascript reliably and consistently. The engine behind the browser known as Chromium is open source, meaning the community could use it, modify it, fix it, and re-release it. Ever since my first use of Chrome, I have spent some time every day with Chrome ever since its launch until recently.

Apple also introduced Safari and this is the primary way Apple users from phones, tablets, and desktop computers access the web.

Microsoft Edge

After I unearthed my Microsoft Internet Explorer CD, I made a realization. I am now using Microsoft Edge for my day-to-day browsing and work. Edge is based on Chromium and has a very similar ecosystem as Chrome, but that is not why I started using it so much.

I started using Edge to get access to Bing Chat and Microsoft’s Generative AI tech. Bing Chat lives in a sidebar right in the browser. It is kind of like your copilot (ahem) and lets you ask questions, get page summaries, compose email messages, and get insights about what you are browsing for. You can even ask Bing Chat who Hans Scharler is and get an answer that Hans Scharler wrote on his about page on his website.

The more and more I use Edge, the more I am hooked. I love the developer tool integration with Visual Studio Code and the extensions that extend Edge. I had to pause when I found the CD. I just realized that I am an Edge and Bing user now almost exclusively. I could not have guessed that was going to happen based on my 15-year obsession with the Google ecosystem.

What do you use (and why)? Let’s discuss this on Discord.

Windows Subsystem for Linux (WSL) lets developers install a Linux distribution and use Linux applications, utilities, and Bash command-line tools directly on Windows, unmodified, without the overhead of a traditional virtual machine or dual-boot setup.

My goal was to build a Next.js app and deploy it to Vercel. I wanted my system to be able to run a Node.js server and be able to develop my app in Visual Studio Code without jumping around. I collected my notes since it was my first time and I probably will want to get my environment set up on another machine. I hope this helps you out.

Use Windows PowerShell to Install WSL 2

Open PowerShell as administrator

• Type this to install WSL

wsl --install

• Check the version to confirm the installation of WSL. You are looking for version 2.

wsl -l -v

• Exit PowerShell by typing exit

Install Windows Terminal

Windows updated the terminal and have provided a great way to interface with your system and subsystems. Go to the Windows Store and install the upgraded Windows Terminal.

Update WSL

• Open WSL by typing wsl in Windows Terminal
• Update Ubuntu: sudo apt update && sudo apt upgrade
• Install cURL: sudo apt-get install curl
• Exit wsl, close Terminal, reopen terminal, get back into WSL

Install Node.js and a Package Manager

• Install Node.js LTS: nvm install –lts
• Install latest Node,js: nvm install node
• Verify installation: nvm ls
• Install Visual Studio Code WSL on your Windows machine
• Install Node Extension Pack
• Install JavaScript Debugger extension

Back to WSL:

• Verify Installation: command -v nvm

Create Your First Next.js Web Application

• cd ~
• mkdir NextProjects
• cd NextProjects
• npx create-next-app my-next-app

Open Visual Studio Code from Windows Terminal

code .

You can now use the terminal tab that’s built into VS Code. To run your app, type “npm run dev” and go to “localhost:3000” in Microsft Edge. “run dev” lets you work on your app and have it running a development instance with hot-reloading, file watching and task re-running. It really speeds up the iterative process.

If you want to opt out of Next.js telemetry, type “npx next telemetry disable” in the VS Code Terminal.

Install React Developer Tools

Install React Developer Tools on the Microsoft Edge Browser so you can get detailed React feedback about your errors and connect the web development experience more tightly to Visual Studio Code.

To open Windows Explorer to manage your files:

explorer.exe .

Don’t forget that dot ^

This is a quite nice trick. You can manage the files on your WSL subsystem. This works how you want it to work. You can move files back and forth.

Profit.

Resources

I found a few resources useful as I learned how to get my laptop and development environment set up. Let me know if you find any useful resources out in the wild.

• WSL Tutorial: https://learn.microsoft.com/en-us/windows/wsl/install
• Node.js Installation Tutorial for WSL: https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl
• Next.js Installation Tutorial for WSL: https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nextjs-on-wsl
• Windows Terminal: https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701?hl=en-us&gl=us&rtc=1

Examples of Web 2.0 applications are Google Mail, Basecamp Project Manager, and UberNote – Note Management.

I recently became aware of UberNote by reading through articles at The Tech Brief. The UberNote application (almost wanted to call it software because you forget that this is a web application since it is so useful and easy to use) allows for quick note-taking, advanced editing, and intuitive tagging.

I am a note-taker. I always have a notebook in my pocket, so I never miss a fleeting idea – maybe one about how toothbrushes with a blue strip fade prematurely while using whitening toothpaste – wouldn’t want to lose that gem. There are times that I email thoughts to myself, leave voice mails on my Skype (which are the only voicemails I get), write on the back of a placemat at a diner – you get the idea. After getting invited to use the UberNote site, I have been putting my thoughts online and have found this a way to keep track of my little thought nuggets that will return literally tens of dollars someday in the future.

I recommend trying UberNote, joining their forums, and helping them shape their initial product offering. Check it out soon, so you don’t miss Web 2.0 and before the Web moves to 3.0 and maybe even Web 3.0 beta.