Klasy w CSS? Jak takie coś zrobić.

pytanie zadane 27 września 2019 w HTML i CSS przez Majonez.exe Gaduła (3,490 p.)

[class=ELEMENT--Z--CSS-WARTOŚĆ--WYŚWIETLANA--PONIŻEJ {
COŚTAM: WARTOŚĆ--WYSWIETLANA...;
}

Legenda do "CSS":

-- Spacja

- Zwykły myślnik

Sorki że to nie jest nawet CSS ale musiałem takie coś dać bo byście nie zrozumieli zapewne.

Jak takie coś zrobić do klasy w HTML? Np.

<span class="background-#000">#000</span>

I CSS renderował by po klasie "background-" i dalszą część i tak do każdej wartości wpisanej po - Wiem że takie coś da się zrobić ale nie wiem jak :(

<span class="background-#000">#000</span>
<span class="background-#fff">#fff</span>
<span class="background-KOLOR">KOLOR</span>

5 odpowiedzi

odpowiedź 28 września 2019 przez Comandeer Guru (601,930 p.)

Nie da się. Jest coś takiego w specyfikacji, przy pomocy attr, ale nikt od lat nie zaimplementował tego. Na chwilę obecną tego typu rzeczy trzeba zrobić przy pomocy Sassa lub innego (pre/post)procesora CSS albo kombinować ze zmiennymi CSS.

komentarz 28 września 2019 przez Majonez.exe Gaduła (3,490 p.)

Ale np. dało by się to zrobić za pomocą "data-COŚTAM="2COŚTAM""

[DATA-] {

Jakaś-wartość-z-css: Wartość z 2COŚTAM;

}

(zwykły tekst bo to nawet nie jest HTML i CSS)

Dało by się coś takiego zrobić?

komentarz 28 września 2019 przez Comandeer Guru (601,930 p.)

Nie, nie dałoby się, bo do tego jest potrzebna składnia, o której wspominam. Inaczej zawartość atrybutu będzie zawsze interpretowana jako zwykły tekst.

komentarz 28 września 2019 przez DawidK Nałogowiec (37,910 p.)

Można, natomiast Comandeer ma rację, że nie jest to efektywne rozwiązanie:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>colors</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <span data-color='#FFFFFF' class='background-color'>1. </span>
    <span data-color='#000000' class='background-color'>2. </span>
    <span class='backgr'></span>
</body>
</html>

main.css

span[class*='background']::after {
    content: attr(data-color);
}

data-color (można to nazwać inaczej byleby zaczynało się od data- ) możesz pobrać z nazwy klasy przy pomocy JS i substr()

Natomiast to trochę poruszanie się po granicy absurdu ;)

komentarz 28 września 2019 przez Comandeer Guru (601,930 p.)

@DawidK, no właśnie nie można… Nie da się tego podstawić pod nic innego, tylko pod content. A specyfikacja zakłada coś takiego np.:

.container {
    width: attr( data-width px );
}

komentarz 28 września 2019 przez DawidK Nałogowiec (37,910 p.)

masz racje, to co uda się przez to osiągnąć to tylko nazwa koloru (tekst) w div / span

odpowiedź 27 września 2019 przez DawidK Nałogowiec (37,910 p.)

Chodzi Ci o pętle w CSS ?

http://thesassway.com/intermediate/if-for-each-while

komentarz 27 września 2019 przez Majonez.exe Gaduła (3,490 p.)

No coś podobnego tylko żeby to nie było w SASS tylko w Pure CSS. Takie jak coś podałem, gdzieś istnieje wartość tylko nie wiem jak takiej użyć. PS. Mi chodzi żeby CSS na żywo renderował wartość z HTML. tak jak podałem w pytaniu.

<span class="background-#000">#000</span>
<span class="background-#fff">#fff</span>
<span class="background-JAKIŚ--KOLOR--WPISANY--I--ŻEBY--ZA--KAŻDYM--RAZEM--BYŁO">KOLOR</span>

komentarz 27 września 2019 przez DawidK Nałogowiec (37,910 p.)

Mi chodzi żeby CSS na żywo renderował wartość z HTML. tak jak podałem w pytaniu.

Miałeś racje, nie zrozumiałem ;) i generalnie nadal nie do końca rozumiem. To co przychodzi mi do głowy to SASS lub CSS + JS

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>colors</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <div id='result'>
    </div>
    <input id='color' type='color' onchange='changeColor();'/>
</body>
</html>

main.css

#result {
    background-color: #000;
    height: 100px;
    width: 100px;
}

main.js

function changeColor() {
    const result = document.querySelector('#result');
    const color = document.querySelector('#color');
    result.style.backgroundColor = color.value;
}

komentarz 28 września 2019 przez Majonez.exe Gaduła (3,490 p.)

Może podam przykład z Tooltip'em (tylko to ma być na klasach a nie na data-, i to niech będzie na kolorach)

[data-tooltip] {
position: relative;
}

[data-tooltip]:hover:before {
opacity: 1;
}
[data-tooltip]:before {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: calc(100% + 5.3333333333px);
box-shadow: 0 0px 10px 0 rgba(119,119,119,0.5);
content: attr(data-tooltip);
RESZTA KODU 
}

Tak jak w przykładzie "Content" pobiera wartość tekstową z data-tooltip="TEKST" a ja chcę żeby np. "box-shadow" pobierał wartość z klasy nadanej elementowi np. (CSS) box-shadow: WARTOŚĆ (HTML) <div class="box-shadow-WARTOŚĆ">

Wiem że takie coś da się zrobić ale nie wiem jak :(

<span data-tooltip="Tooltip">Hover to see effect</span>

A powyżej kod HTML żeby pokazać jak działa ten tooltip (Ucięty jest css zobacz na https://aurolia-css.github.io/tooltip.

Może coś zrozumiesz?

komentarz 28 września 2019 przez DawidK Nałogowiec (37,910 p.)

Możesz wyszukać elementy, które zawierają w nazwie klasy 'background' i wypisać ich pełne nazwy w content.

Wątpie jednak, żeby bez JS i jakiegoś pomocniczego atrybutu udało się je przyciąć do samej nazwy koloru np ostatnie 7 znaków, żeby wyświetlalo tylko wartość koloru.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>colors</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <span class='background-color-#FFFFFF'>1 </span>
    <span class='background-color-#000000'>2 </span>
    <span class='backgr'>3 </div>
</body>
</html>

main.css

span[class*='background']:after {
    content: attr(class);
}

span {
    display: block;
    margin-bottom: 1rem;
}

odpowiedź 28 września 2019 przez Artek Stary wyjadacz (11,800 p.)

odpowiedź 28 września 2019 przez Tnifey Pasjonat (24,190 p.)

może użyj zmiennych z css3 bo inaczej to musisz generować każdą klasę do każdego koloru, albo ogarnąć to za pomocą javascriptu :P

.magic-color {
  background-color: var(--dynamic-background-color);
  width: 400px;
  height: 400px;
}

<div class="magic-color" style="--dynamic-background-color: crimson">
  kolor powinien być czerwony
</div>

https://codepen.io/Tnifey/pen/OJLYbZB

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

odpowiedź 28 września 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Ja bym podszedł inaczej do tego problemu, i takie też stosuję w niektórych projektach - zrób sobie dodatkowe klasy, np. background-color-blue, background-color-red itp. i niech te klasy ustawiają tylko pojedyncze wartości. Jest to wtedy czytelne i proste rozwiązanie, bez jakiegoś kombinowania, a po drugie masz większą kontrolę nad kolorami jakich używasz. Jak zechcesz zmienić np. "-blue" na nieco jasniejszy w całej apce to zmienisz tylko w jednym miejscu, w jednej definicji tej klasy.