Stack Overflow
Stack Overflow

Questions tagged [css-houdini]

Use this tag for questions about CSS new set of web APIs which gives control over CSS layout and styling process of the rendering engine of a web-browser.

CSS-Tag Houdini TaskForce is a group composed of engineers of the major web-browsers, which aims at creating a set of Web APIs to give web-developers the access to the "magic" of CSS.

28 questions
5
votes
3 answers

Using CSS can I check if a browser supports the "CSS Properties and Values API" (Houdini) @property rule

With some browsers starting to introduce the CSS Houdini API, I was wondering if there were any ways to identify if the CSS Properties and Values API is supported with CSS alone? With Javascript I'm able to check if the API exists: ✅ typeof…
Mark Notton
  • 4,916
  • 4
  • 21
  • 30
4
votes
1 answer

Create a brightness function on Houdini CSS

Would it be possible to create a "brightness" function using the Houdini API? For example: Suppose that you created a CMS in which people can customize 10 colors. Some of the details in the page, however, should have a color that is a variant of…
Fabio Nolasco
  • 7,122
  • 6
  • 35
  • 32
4
votes
1 answer

Can the PaintWorklet be inlined?

The idiomatic way to use the CSS Paint API seems to be: Create a xyz.js file Populate with a class containing a paint(ctx, geom, properties) function Call registerPaint, passing the class as an argument Call CSS.paintWorklet.addModule('xyz.js')…
Matt Thomas
  • 5,279
  • 4
  • 27
  • 59
3
votes
1 answer

Can't pass extra args to CSS Houdini paint function?

I have a React/Electron app (with .scss files and CSS modules) where I'm trying to use CSS Houdini paint() function. I've successfully managed to call it, but it appears adding a second argument to paint() is causing it to…
IronWaffleMan
  • 2,513
  • 5
  • 30
  • 59
2
votes
1 answer

How to return the properties of CSS.registerProperty()

I have registered a property through the CSS.registerProperty method. The problem is that when I load the same component a DOMException is thrown because such a property already exists. I am looking for a way to know if there is a getter for…
LegatusSexto
  • 46
  • 4
2
votes
1 answer

Houdini gradient transition on hover with styled-component

See this code example: Houdini-gradient-borders When I want to recreate this effect in React TS with styled components I get it compiled with no errors. But the gradient on hover effect does not work. I am struggling to find the solution to get it…
user18943198
2
votes
0 answers

Houdini API does not work on with "href" attribute

I tried to implement the button and the link with polygon border based on the Houdini API. Sadly I found out that when I add "href" attribute to tag, it no longer works. Do you have any ideas how to fix this or is this browser bug? Here is the demo…
Petr Glaser
  • 21
  • 1
2
votes
3 answers

CSS Typed OM -- parsing background color?

const box = document.getElementById('rb'); console.log(box.computedStyleMap().get('background-color')) .red { background-color: #FF0000; } .box { width: 100px; height: 100px; }
Using the new…
mpen
  • 272,448
  • 266
  • 850
  • 1,236
2
votes
1 answer

Why CSS.registerProperty is in JavaScript but not in CSS?

There is a draft of such feature as CSS.registerProperty. In fact, it allows to define types for CSS variables so that browser will be able to extend its abilities about them including animating values. For me it seems strange that the feature that…
Qwertiy
  • 19,681
  • 15
  • 61
  • 128
1
vote
1 answer

Border-image conic-gradient example does not work in React

I am working to redo this Codepen in React Typescript. I found it in the blogpost here Simple way - creating React App and adding into css file it works perfect. No I tried the way with styled components and it seems I am missing something as it…
user18943198
1
vote
1 answer

Why do css variable animations not work in web-components

I've successfully created a css variable animations, using the experimental @property feature. IMPORTANT: this only works in Chrome, Opera or Edge compatibility table document.addEventListener('DOMContentLoaded', () => { const rangeInput =…
Marcello di Simone
  • 1,612
  • 1
  • 14
  • 29
1
vote
0 answers

How to use CSS @property with scss?

I want to declare a custom variable with a specific syntax e.g.: @property --colorPrimary { syntax: ""; initial-value: magenta; inherits: false; } So that I can animate the property, however this bit of code seems to be ignored by…
Mike Jerred
  • 9,551
  • 5
  • 22
  • 42
1
vote
1 answer

@property not accept length in em unit

NOTE: The MRE might not work in some browsers due to the poor support table. @property --width1 { syntax: ''; inherits: false; initial-value: 20em; } @property --width2 { syntax: ''; inherits: false; initial-value:…
Book Of Flames
  • 316
  • 3
  • 13
1
vote
1 answer

How do I use CSS Houdini in Next.js

I would like to use CSS Houdini in a Next.js project I am building. I have installed, via yarn, both the CSS Houdini package I want to use along with css-paint-polyfill. I am following the webpack instructions here https://houdini.how/usage Here…
Tim Smith
  • 13
  • 1
  • 5
1
vote
2 answers

Can't import css houdini paint js file

I have a React/Electron app, where I'm trying to use the new CSS Houdini paint() function (as demonstrated in this page). In my project's index.html file I have added a script tag with the paintWorklet addModule() function as shown: