CSS tips & tricks contd

⚙️ calc() — Dynamic Width Formula

🔹 Syntax

width: calc(<value> [operator] <value>);

Operators:
+, -, *, /
(You must have spaces around the operator.)

---

💡 Common Use Cases

1️⃣ Subtracting Fixed Space (e.g., Sidebar or Padding)

Suppose your page layout has a sidebar 250px wide, and you want the main content to fill the rest.

.main-content {
  width: calc(100% - 250px);
}

✅ The element automatically adjusts if the container resizes, always leaving 250px for the sidebar.

---

2️⃣ Combining Percent and Padding

You can mix relative and absolute units:

.card {
  width: calc(50% - 1rem);
}

➡️ This ensures your card takes half the container’s width but leaves space for margins or gaps.

---

3️⃣ With Viewport Units

.banner {
  width: calc(100vw - 40px);
}

This sets the banner to the full viewport width minus 40px (useful to avoid scrollbars).

---

4️⃣ Nested Layout Example

.container {
  display: flex;
}
.sidebar {
  flex: 0 0 250px;
}
.main {
  flex: 1;
  width: calc(100% - 250px);
}

Even though Flexbox handles it well, calc() can be a safety net for older layouts or fixed grid systems.

---

5️⃣ Inside clamp() for Responsive Widths

You can even combine calc() with clamp() for fine-tuned responsiveness:

.section {
  width: clamp(300px, calc(50% + 10vw), 900px);
}

Here:

• Minimum width: 300px

• Ideal width: 50% + 10vw

• Maximum width: 900px

---

🧠 Rules to Remember

• Always include spaces around operators (+, -, etc.) → calc(100% - 50px) ✅

• You can use any mix of units (%, px, rem, vw, etc.)

• Works in all modern browsers (IE9+).

---

🎨 Quick Example — Flexbox + Calc

.container {
  display: flex;
}

.left {
  width: 200px;
}

.right {
  width: calc(100% - 200px);
}

Perfect — you’re talking about customizing scrollbars using the ::-webkit-scrollbar pseudo-elements.
This is one of those underrated CSS tricks that can make your UI look polished 🌈

Let’s go over it cleanly and include a section you can drop into your Hashnode article right away.

---

🖱️ Custom Scrollbars with ::-webkit-scrollbar

The ::-webkit-scrollbar pseudo-elements are non-standard CSS properties (work in WebKit and Blink browsers: Chrome, Safari, Edge, Opera).
They let you style the scrollbar—its track, thumb, and buttons.

---

🔹 Basic Structure

Each scrollbar is made of parts you can style:

---

🔸 Example: Minimal Scrollbar

/* The container must have overflow */
.container {
  overflow-y: auto;
  height: 300px;
}

/* Scrollbar width */
.container::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* Thumb */
.container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  border: 2px solid #f1f1f1; /* adds a gap around thumb */
}

/* Hover effect */
.container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

💡 Result: A clean, rounded scrollbar that blends with light UI themes.

---

🌙 Dark Mode Version

.dark-scroll::-webkit-scrollbar {
  width: 10px;
}
.dark-scroll::-webkit-scrollbar-track {
  background: #1a1a1a;
}
.dark-scroll::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 6px;
  border: 2px solid #1a1a1a;
}
.dark-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #666;
}

---

🔧 Horizontal Scrollbars

Same rules apply; you can use overflow-x: auto; and the scrollbar will appear horizontally.

---

🧩 Combine with Flexbox Layouts

You can use it with any scrollable div:

.scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  scroll-behavior: smooth;
}
.scroll-container::-webkit-scrollbar {
  height: 8px;
}

---

🧠 Browser Notes

• Works in Chrome, Edge, Safari, Opera.

• For Firefox, you can use:

    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
  

• Not part of the official CSS spec (yet), but widely supported.

---

🎨 Bonus Tip: Hide Scrollbar but Keep Scroll

If you want scrolling but don’t want the scrollbar visible:

.hide-scroll {
  overflow: auto;
}
.hide-scroll::-webkit-scrollbar {
  display: none;
}
.hide-scroll {
  -ms-overflow-style: none;  /* IE & Edge */
  scrollbar-width: none;     /* Firefox */
}

---