@ and % characters are escaped in class names

  • Alexandre Buffet

    (@alexandrebuffet)


    1 year, 1 month ago

    Hello there.

    I’m using the CodyFrame framework (https://codyhouse.co/ds/get-started) and I’d like to add utility classes to my form elements, but apparently the @ and % are escaped in the class names. For example, I can’t add the width-100% class to a text field via class:width-100% because its escaped as class:width-100.

    Is there a way of managing these characters in the field classes?

    If not, would it be possible to review the formatting of the classes and allow these characters?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    1 year, 1 month ago

    No, it is not possible. Does the framework recommend using such signs in a class attribute?

    Thread Starter Alexandre Buffet

    (@alexandrebuffet)

    1 year, 1 month ago

    Yes, the framework provides utility classes with these characters. For example, breakpoints are specified with the @ character as in col-8@md, and units are specified as in the width-100% class.

    Most popular TailwindCSS framework also use the / character in classes as in the w-1/2 class.

    Would it be possible to consider escaping with backslashes in the name of classes when specifying them on fields as long as they are valid CSS identifiers?

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    1 year, 1 month ago

    I don’t think expanding acceptable characters for class makes no sense, but in many parts of WordPress there are stricter rules applied, such as sanitize_html_class() that only accepts [A-Za-z0-9_-]. So, even if Contact Form 7 would accept @ and % for a class name, there is no guarantee that those classes will work as intended on your WordPress site.

    Anyway, this is an interesting topic. I’ll consider addressing it in some way.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘@ and % characters are escaped in class names’ is closed to new replies.