Around the Frontend World, vol. 21

Text-box – Finally, Control Over Space Above and Below Text

Starting with Chrome 133 and Safari 18.2, the CSS text-box property arrives, letting you precisely trim the space above and below text. This means easier vertical centering and better visual alignment of elements like <h1>, <button>, or <span> — across different fonts.

How does it work?

Fonts add so-called half-leading above and below text – invisible space that, until now, couldn't easily be controlled. With text-box, you can finally:

h1 {
  text-box: trim-both cap alphabetic;
}

/* trim-both – ořízne prostor nad i pod textem */
/* cap – horní referenční bod (výška velkého písmena) */
/* alphabetic – dolní referenční bod (běžná linie písma) */

This lets us achieve even padding without needing to "hack" values to match a particular platform's appearance.

The syntax includes a long-hand version with the text-box-trim a text-box-edge properties, or a shorthand using text-box. The shorthand is the most common and most practical for everyday use.

Cody vs. Tabnine: Key Differences Between AI Assistants

At Superkoders, we use the Cody extension for tab-based code autocompletion, which lets us code efficiently without having to pay for advanced features like AI chat. Some colleagues are also testing Cursor, a VS Code-based editor that integrates AI features directly into the workspace.

For comparison, Tabnine is an alternative tool focused on personalized code completion. Unlike Cody, Tabnine learns from your specific coding patterns and offers tailored suggestions, from individual words to entire blocks of code. It can be deployed locally, which ensures greater security and control over data, making it advantageous for companies with strict security requirements.

Advantages

• Control over data and security – Code stays exclusively within the company environment, ensuring a high level of privacy and security.
• Localized deployment – You can choose between deploying on your own servers or in a private cloud (VPC), offering flexibility depending on the company's infrastructure.
• Custom models – The ability to tailor AI models to a team's and codebase's specific needs, increasing the efficiency and accuracy of suggestions.
• Integration with Jira – Easy integration with Atlassian Jira, which can be useful for task management and tracking development progress within a team.

Disadvantages

• Cost – Localized deployment isn't free and can be expensive, especially for smaller teams (starting at $39 per user per month).
• Deployment complexity – Requires advanced technical skills to manage and maintain, which can be time-consuming.

Detecting JavaScript Support with CSS

Using the @media (scripting: ...) media query, we can respond in CSS to whether the user has JavaScript enabled in their browser. This property opens up new possibilities for progressive style enhancement — without having to touch HTML or JavaScript.

@media (scripting: enabled) {
  .my-element {
    /* Styly, pokud je JavaScript povolen */
  }
}

@media (scripting: none) {
  .my-element {
    /* Alternativní styly, pokud je JavaScript zakázán */
  }
}

There's also an initial-only value available, which targets situations where JavaScript was available when the page loaded but isn't available later. This can be useful, for example, for print styles.

Advantages

• Lets you style elements based on whether JavaScript is available, without needing to add classes like .no-js to your HTML.
• Simplifies fallback solutions for situations where JS is unavailable (e.g., static content versions, alternative layouts).
• Also handy for specific modes like print (e.g., using the initial-only value).
• Improves the user experience by reducing unwanted FOUC (Flash of Unstyled Content).
• Accessibility improvement: For users who have JavaScript disabled or use script-blocking tools, scripting: none lets you provide alternative content or styling that better fits their needs.

Popover API Now Part of Baseline

Popover API, which makes it easy to build popovers directly in HTML without needing to write JavaScript, officially became part of Baseline as of January 27, 2025.

This API lets web applications add popovers that are accessible and easy to control. Before it landed in Baseline, its support was problematic, particularly due to a bug in mobile Safari that prevented the popover from closing correctly when clicking outside it. After that bug and other improvements were fixed, the API is now fully compatible with major browsers.

When should you use JavaScript?

• Hover display – showing something on hover can be done with CSS, but with JS we can handle cases where we don't want the display to trigger if the mouse just quickly passes over the element. Using JS, we can use setTimeout a clearTimeout when the mouse leaves the element, so the popover won't even appear if you accidentally sweep the mouse quickly across the element.
• Positioning – to keep a popover from spilling off the edge of the screen, you still need to reach for some package to handle the positioning (and any flipping) for you. Examples include Popper or FloatingUI.