How create a Shortcode with hover and complex options

I am wondering how do you do when you have to create a shortcode with multiple hover or complex options ( gradient, boxshadow etc, thing that can’t be inline ).
How do you generate the css.

I don’t want to generate a <style></style> block because for a simple shortcode used 10 times in the page would generate 10 blocks.

All the shortcode are set from the page, by the user, so are created when the_content() is called.

I want to give the user the possibility to edit and custom the shortcode for exmample let the user choose what border-radius to use when button is hovered etc ( let the user custom the style completely ).

Looking for an option that would validate as html5 and in WC3.

Adding an ID to each shortcode and generate custom css is what I am looking to do but I can’t find a way to do this properly ( without creating <style></style> block everywhere )

Any advice and examples are welcome.

Thanks in advance!

Store the user settings in a $GLOBAL variable during the_content generation. Then in wp_footer hook generate a single style block that has the settings from all the custom elements generated on the page.

Thanks for the reply,

I tried this option using a global variable for the shortcode and then I thought about generating a dynamic css file in the wp_footer hook but didn’t succeed.

I am having a problem when I try to generate the dynamic css in the wp_footer hook since ajax is already loaded.

If you have more advice or a simple example of code that work that would really be awesome.


Additional information :
Using a global variable works fine to create a shortcode and then generate the custom css.
But I can’t find a way to have a <style> block generated in the head or a way to load the dynamically created css / css.php file after the content.

Any advice would be awesome.