VOL. VIII

• Accessibility Extension
• Voting
• New CSS Features

Accessibility Act Extension

With the upcoming Accessibility Act, it's more important than ever that our projects comply with accessibility standards (WCAG 2.1 AA at minimum). Many A11y features would be repetitive across projects and should therefore be abstracted into a shared library or even a TYPO3 extension, significantly improving developer efficiency and ensuring compliance.

Common A11y Implementations

TYPO3 ViewHelpers

Problem: Additional visual cues (such as color to indicate danger or success) must also be conveyed to non-visual users (e.g. screen readers).

Solution: Create a custom ViewHelper that adds hidden accessible text automatically based on context.

Example:

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

would become:

<fh:a11y.alert type="danger">
    This action is not reversible
</fh:a11y.alert>

note

There might be even more attributes to make it more flexible.

SCSS

Problem: Animations and visual changes without proper transitions or respect for user settings (like prefers-reduced-motion) can negatively impact users.

Solution: Use Bootstrap's utility mixins such as transition() to apply smoother, accessible-friendly animations.

Example:

.class {
    @include bootstrap.transition(background-color 0.15s ease-in-out);
}

will automatically generate:

.class {
  transition: background-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .class {
    transition: none;
  }
}

info

While SCSS utilities (such as transitions, focus styles, and color adjustments) improve technical accessibility, accessible design decisions must start at the design stage.
Designers should ensure that:

• Color contrasts meet WCAG standards without relying solely on developer adjustments
• Interactive elements are sized appropriately for touch and keyboard users
• Visual indicators (like errors, warnings, and states) are not based on color alone but combined with icons or text labels (if possible)
• Motion and animation are used thoughtfully and respect users who prefer reduced motion

→ Close collaboration between developers and designers is crucial to building fully accessible user interfaces.

TypeScript

Problem: Some libraries (like Swiper) offer partial A11y support, but often miss critical user settings, such as the device's reduced motion preference.

Solution: Manually detect reduced motion settings and configure components accordingly.

Example with Swiper:

function usesReducedMotion() {
  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}

new Swiper(".swiper", {
  speed: usesReducedMotion() ? 0 : 300,
  effect: usesReducedMotion() ? 'fade' : 'slide',
});

note

Setting speed to 0 removes animated transitions, and switching from slide to fade avoids unnecessary motion when a user drags the slide.

Final thoughts

The examples and strategies discussed here cover only a small part of what true accessibility requires. Accessibility (A11y) is a broad and ongoing effort, and ensuring compliance with the WCAG (Web Content Accessibility Guidelines) demands attention to many more aspects—such as complex interactive components, dynamic content updates, and assistive technology compatibility.

Conclusion / Results

• We should instead find some useful tools that catch A11y issues early in the development process.
• In the meanwhile, we should also collect repetitive or most likely overseen A11y issues and focus on them afterward.

New CSS Features in 2025 — A Quick Overview

The CSS is changing fast these days. I will quickly go through and show off some of the newest CSS features, plus a few cool ones that have been around for a bit but are totally worth checking out.

---

1. CSS Custom Functions (@mixin) (Sneak Peek Only)

👎 Not implemented yet

✨ Still a draft proposal, not implemented in any browser yet!

Overview

CSS Custom Functions (aka native mixins) will allow authors to define reusable logic inside CSS using @function.

Custom functions (formerly "Mixins") allow reusable, parameterized snippets directly in CSS.

@function --shadow(--shadow-color <color> : blue) {
    result: 0.25rem 0.25rem var(--shadow-color, black);
}

.foo {
  --shadow-color: #003388;
  box-shadow: --shadow(); /* produces a blue shadow */
  /* or just */
  box-shadow: --shadow(#663399);
}

Why It’s Useful

• Pros: DRY principle in CSS, no need for preprocessors.
• Cons: Not available yet; syntax still evolving.

📷 Browser Support

Limited Support

Not supported in any browser (as of today).

📚 Read More

• CSS Mixins Draft – W3C
• CSS Custom Functions—Sneak peek

2. align-content: center for Block Layout

Overview

The align-content property, previously limited to grid/flex, now works with block containers — allowing easy vertical centering.

Example

.container {
    display: block;
    align-content: center;
}

Why It’s Useful

• Pros: Simplifies vertical layout alignment.
• Cons: Still requires compatible container context.

📷 Browser Support

✅ Full support

✨ Supported by all browsers

📚 Read More

• CSS Tricks Blogpost
• MDN Docs

3.Anchor positioning

Overview

Anchor positioning allows one element (like a tooltip/popover) to be positioned relative to another element (its anchor), without nesting or JS.

Example

<div class="anchor">anchor</div>
<div class="target">target</div>

.anchor {
    anchor-name: --my-anchor;
}

.target {
    position: absolute;
    position-anchor: --my-anchor;
    position-area: start end;
}

Why It’s Useful

• Pros: Enables advanced layouts like floating UI, tooltips, menus.
• Cons: Requires learning a new positioning model.

📷 Browser Support

Limited Support

Not supported in Safari and Firefox (Limited availability).

📚 Read More

• MDN Docs
• CSS Anchor Positioning Guide

4.:user-valid / :user-invalid Pseudo-Classes

Overview

These pseudo-classes target user-modified form fields, unlike :valid and :invalid which apply automatically.

Example

input:user-valid {
    border-color: green;
}

input:user-invalid {
    border-color: red;
}

Why It’s Useful

• Pros: Improves form UX by styling fields only after interaction.
• Cons: Easy to confuse with :valid / :invalid.

📷 Browser Support

✅ Full support

✨ Supported by all browsers

📚 Read More

• MDN - :user-invalid
• MDN - :user-valid

5. Typed Custom Properties

Overview

Define type-safe CSS variables using @property, enabling transitions and calculations.

Example

:root {
    --main-hue: 200;
}

@property --main-hue {
    syntax: "<number>";
    inherits: false;
    initial-value: 240;
}

Why It’s Useful

• Pros: Enables animation and type validation for variables.
• Cons: More verbose than regular var() syntax.

📷 Browser Support

✅ Full support

Supported by all browsers (Newly available).

📚 Read More

• MDN - @property
• CSS Tricks - @property

6. text-wrap: balance

Overview

Balances text lines in headings and short blocks, avoiding awkward breaks.

Example

h1 {
    text-wrap: balance;
}

Why It’s Useful

• Pros: Automatic, aesthetically pleasing titles.
• Cons: Doesn’t give full manual control.

📷 Browser Support

✅ Full support

Supported by all browsers (Newly available).

📚 Read More

• MDN- text-wrap
• Chrome Dev - CSS text-wrap: balance

7. Container Queries

Overview

Apply styles based on the size of a container, not just the viewport.

Example

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

@container (min-width: 500px) {
    .card {
        flex-direction: row;
    }
}

Why It’s Useful

• Pros: Component-level responsiveness.
• Cons: Requires defining containers explicitly.

📷 Browser Support

✅ Full support

Supported by all browsers (Newly available).

📚 Read More

• MDN- Container Queries
• CSS Container Queries

8. @starting-style

Overview

Specifies the starting point of an animation directly in CSS.

Example

.box {
    transition: opacity 0.4s ease-in;
    opacity: 1;

    @starting-style {
        opacity: 0;
    }
}

Why It’s Useful

• Pros: No more JS or utility classes for entrance animations.
• Cons: May conflict with existing transitions.

📷 Browser Support

✅ Full support

Supported by all browsers (Newly available).

📚 Read More

• MDN - @starting-style
• Chrome Dev - entry and exit animation

9. Easier Math in @media

Overview

Use expressive math ranges like 30rem <= width <= 50rem in media queries.

Example

@media (30rem <= width <= 50rem) {
    .grid {
        gap: 2rem;
    }
}

Why It’s Useful

• Pros: Cleaner media logic, fewer logical errors.
• Cons: Needs polyfills or fallback syntax in older browsers.

📷 Browser Support

✅ Full support

Supported by all browsers (Newly available).

📚 Read More

• MDN - @media

10. interpolate-sizeProperty

Overview

Controls how size changes are interpolated during transitions or animations.

Example

.card {
    interpolate-size: auto;
}

Why It’s Useful

• Pros: Smooth growth/shrink transitions.
• Cons: Experimental; limited support as of now.

📷 Browser Support

Limited Support

Not supported in Safari and Firefox (Limited availability).

📚 Read More

• MDN - interpolate size

Voting

We have two pending votings for this volume of the Dev Dungeon.

derhansen/form_crshield

derhansen/form_crshield - Form challenge/response spambot shield is a TYPO3 extension to prevent automated form submissions in TYPO3 form extension.

Should we add it to the composer template for further use / easier integration?

Forms

Should we in general move our *.form.yaml files

from packages/distribution_package/Resources/Private/Forms/
to packages/distribution_package/Configuration/Forms/

One might argue, it's more of a config, than it is a private Resource, isn't it?
Should we move it move it?

Conclusion

derhansen/form_crshield:

• Should be definitely added to suggested packages in the composer template
• We might just pick it up and implement it ourselves

form structure:

• Keep it as is for now

Dungeon Pick

Is Vibe Coding here to stay? Read here.

Vibe Coding is not an excuse for low-quality work.
A field guide to responsible AI-assisted development.