Skip to content

Styles for 22 non-standard HTML elements: keep, change, or remove? #4004

@sjoqvist

Description

@sjoqvist

The generated CSS file has 66 lines beginning with these kinds of tags (has-*)

bulma/css/bulma.css

Lines 16452 to 16455 in 82c5f33

has-text-text.is-hoverable:hover,
has-text-text.is-hoverable:focus-visible {
color: hsl(var(--bulma-text-h), var(--bulma-text-s), calc(var(--bulma-text-l) + var(--bulma-hover-color-l-delta))) !important;
}

All in all, there are styles for :active, :focus-visible, :hover for each of the following elements.

  • <has-background-black class="is-hoverable" />
  • <has-background-danger class="is-hoverable" />
  • <has-background-dark class="is-hoverable" />
  • <has-background-info class="is-hoverable" />
  • <has-background-light class="is-hoverable" />
  • <has-background-link class="is-hoverable" />
  • <has-background-primary class="is-hoverable" />
  • <has-background-success class="is-hoverable" />
  • <has-background-text class="is-hoverable" />
  • <has-background-warning class="is-hoverable" />
  • <has-background-white class="is-hoverable" />
  • <has-text-black class="is-hoverable" />
  • <has-text-danger class="is-hoverable" />
  • <has-text-dark class="is-hoverable" />
  • <has-text-info class="is-hoverable" />
  • <has-text-light class="is-hoverable" />
  • <has-text-link class="is-hoverable" />
  • <has-text-primary class="is-hoverable" />
  • <has-text-success class="is-hoverable" />
  • <has-text-text class="is-hoverable" />
  • <has-text-warning class="is-hoverable" />
  • <has-text-white class="is-hoverable" />

Here's where they are generated:

a.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name},
button.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name},
#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {

and
a.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name},
button.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name},
#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {

  1. Are these elements used somewhere? I think that some browsers might not allow them to be active or focused.
  2. Or are they obsolete?
  3. Or were they supposed to have been class names? In that case, can they be removed since they haven't been missed?

While the documentation refers to most of these as classes, this doesn't seem to be the case with has-background-text and has-text-text.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions