1. Forum
  2. Usenet
  3. COMP.INFO.WWW.AUTHORING.S

  • Using attr to create a url string

    From Andrew Poulos@21:1/5 to All on Sat May 30 16:37:15 2020
    With this HTML

    <div data-setting="background"></div>

    I'm trying to get CSS to add an image using

    div[data-setting]::after {
    content: url("icons/" attr(data-setting) ".png");
    }

    but the image doesn't appear. If I hard code the URL

    content: url("icons/background.png");

    the image does appear. I thought that attr returned a string but I guess
    I'm using attr wrongly.

    If it's possible, how do you create a url using attr to display an image?

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Osmo Saarikumpu@21:1/5 to Andrew Poulos on Mon Jun 1 08:13:03 2020
    On 30/05/2020 09:37, Andrew Poulos wrote:
    With this HTML

    <div data-setting="background"></div>

    I'm trying to get CSS to add an image using

    div[data-setting]::after {
      content: url("icons/" attr(data-setting) ".png");
    }

    but the image doesn't appear. If I hard code the URL

    To my latest knowlegdge (my notes on CSS 2.1), CSS-generated content is
    not included in the DOM, i.e. it's purely presentational and thus not programmable.

    --
    Best wishes, Osmo

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Osmo Saarikumpu on Mon Jun 1 17:14:37 2020
    On 1/06/2020 3:13 pm, Osmo Saarikumpu wrote:
    On 30/05/2020 09:37, Andrew Poulos wrote:
    With this HTML

    <div data-setting="background"></div>

    I'm trying to get CSS to add an image using

    div[data-setting]::after {
       content: url("icons/" attr(data-setting) ".png");
    }

    but the image doesn't appear. If I hard code the URL

    To my latest knowledge (my notes on CSS 2.1), CSS-generated content is
    not included in the DOM, i.e. it's purely presentational and thus not programmable.

    Ah, so CSS strings vary depending on how they are used. This page
    <https://davidwalsh.name/css-content-attr>
    shows content concatenation of a string so I thought I could also build
    a URL with it. Bummer.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Osmo Saarikumpu@21:1/5 to Andrew Poulos on Tue Jun 2 09:56:13 2020
    On 01/06/2020 10:14, Andrew Poulos wrote:
    Ah, so CSS strings vary depending on how they are used. This page
      <https://davidwalsh.name/css-content-attr>
    shows content concatenation of a string so I thought I could also build
    a URL with it. Bummer.

    The second to last paragraph shows the author's hands on approach:

    "Trying to concatenate via JavaScript "+" or any other symbol will bomb
    ... not that I found that out the hard way or anything..."

    In Finland, wew call it "learning through the ankle." :)

    --
    Best wishes, Osmo

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)