Makeshift CSS/HTML Only Text Variables

Question

I made a template for a thing that displays the technical stats of 3D art. To make it quicker to fill in the numbers and because I can't use JS for this: I use custom properties and spans to make makeshift text variables that can be slotted into the HTML.

What I made works, but I'm wondering if it can be simplified.

<style>
    /*Define Variables*/
    :root {
        /*add more if needed, remember to increment number and insert the additional spans*/
        /*--Polycount*/
        /*Remember to use Decimal Separators (10000→10,000)*/
        --faceCount_0: "NUMBER";
        --triCount_0: "NUMBER";
        /*-Replace X with unit prefix (X→m for mB, X→k for xB, ETC)*/
        /*include ~ for rounded/estimated sizes*/
        --modelSize_0: "SIZE X";
        --texSize_packed_0: "SIZE X";
        --texSize_unpacked_0: "SIZE X";
        --totalSize: "SIZE X";
    }

    /*Insert Variables before spans*/
    /*--Polycount*/
    span.faceCount_0::Before {
        content: var(--faceCount_0);
    }

    span.triCount_0::Before {
        content: var(--triCount_0);
    }

    /*--File Sizes*/
    span.size_model_0::Before {
        content: var(--modelSize_0);
    }

    /*add more if needed, remember to increment number*/
    span.size_tex_packed_0::Before {
        content: var(--texSize_packed_0);
    }

    span.size_tex_unpacked_0::Before {
        content: var(--texSize_unpacked_0);
    }

    span.size_total::Before {
        content: var(--totalSize);
    }

    /*...*/
    /*Main Section*/
    div.mom {
        display: flex;
        border: 1pt solid;
        border-right-style: hidden;
        border-left-style: hidden;
        justify-content: space-between;
    }

    p.title {
        font-size: 24pt;
        font-weight: 100;
        margin-bottom: 0%;
        text-decoration: underline;
    }

    ul.data {
        font-weight: 500;
        margin-top: 0%;
    }

    li.textureData {
        font-size: 14pt;
        line-height: 100%;
        margin-bottom: 1%;
    }

    li.textureData table {
        border-collapse: collapse;
        vertical-align: bottom;

    }

    @media (orientation: landscape) {
        div.mom {
            flex-direction: row;
            padding: 0em 2vw 0.5em;
        }

        div.mom div:first-child {
            padding: inherit 0em inherit inherit;
        }

        div.mom div:last-child {
            padding: inherit inherit 0em inherit;
        }
    }

    @media (orientation: portrait) {
        div.mom {
            flex-direction: column;
        }
    }
</style>

<div class="mom">
    <!-- Polycount -->
    <div>
        <p class="title">Polycount</p>
        <ul class="data"><!--margin-bottom:5.4em;-->
            <li style="font-size:14pt;">
                <span class="faceCount_0"></span> Faces | <span class="triCount_0"></span> Triangles
            </li>
        </ul>
    </div>

    <!-- File Size -->
    <div>
        <p class="title"><u>File Size</u></p>
        <ul class="data">
            <li style="font-size:14pt;">
                Model: <span class="size_model_0"></span>iB
            </li>

            <li class="textureData">
                <Table>
                    <tr>
                        <td>Textures:</td>
                        <td style="font-size:12pt;">Packed PBR — <span class="size_tex_packed_0"></span>iB</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td style="font-size:10pt;">
                            (Unpacked PBR — <span class="size_tex_unpacked_0"></span>iB)
                        </td>
                    </tr>
                </Table>
            </li>

            <li style="font-size:14pt;">
                Total: <span class="size_total"></span>iB
            </li>
        </ul>
    </div>
</div>

Since most variables are used only once, you might ask yourself the question if using css variables actually makes the code easier to read. — Kokodoko
– Kokodoko, Commented Oct 18, 2023 at 13:09

Sean · Accepted Answer · 2023-12-22 16:18:55Z

Using the CSS content property to insert non-decorative content causes accessibility issues because assistive tech may not be able to access it. People using assistive tech like screen readers might not be able to read any of those variables. This technique fails to meet the lowest level of WCAG standards and is inadvisable for use outside of private personal projects.

From a markup point of view, most of the information is tabular so you could use tables for all of it instead of tables within lists. MDN has a good guide on HTML table advanced features and accessibility. Also note that paragraph elements don't make the best labels semantically, and instead captions (if using tables) or heading elements should be used.

This cleans up the markup and CSS quite a bit and feels like it would be easier to maintain, even though it doesn't use any sort of variables.

table {
  margin: 1rem;
}

caption {
  text-align: left;
  font-weight: bold;
  font-size: 2rem;
}

table,
th,
td {
  border: 1px solid;
  border-collapse: collapse;
  text-align: left;
  padding: 0.25rem;
}

<table>
  <caption>Polycount</caption>
  <tbody>
    <tr>
      <th scope="row">Faces</th>
      <td>0</td>
    </tr>
    <tr>
      <th scope="row">Triangles</th>
      <td>0</td>
    </tr>
  </tbody>
</table>
<table>
  <caption>File Size</caption>
  <tbody>
    <tr>
      <th scope="row">Model</th>
      <td>0iB</td>
    </tr>
    <tr>
      <th scope="row">Textures (Packed)</th>
      <td>0iB (Unpacked: 0iB)</td>
    </tr>
    <tr>
      <th scope="row">Total</th>
      <td>0iB</td>
    </tr>
  </tbody>
</table>

Stack Exchange Network

Makeshift CSS/HTML Only Text Variables

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Makeshift CSS/HTML Only Text Variables

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions