Вход | Регистрация
 

вопрос по использованию css, call(), attr()

вопрос по использованию css, call(), attr()
Я
   vde69
 
20.03.21 - 14:53
html
  <div class="decoration" data-d-w=3 data-d-h=5 data-d-l=1 data-d-t=1 data-d-n="Heat">-</div>

css
:root {
  --Step: 75px;
}


.decoration {
    position: absolute;
    left:calc(var(--Step) * attr(data-d-l)); // не работает
    top:calc(var(--Step) * attr(data-d-t)); // не работает
    float:left;
    overflow:hidden;
    width:calc(var(--Step) * attr(data-d-w) - 2px);  // не работает
    height:calc(var(--Step) * attr(data-d-h) - 2px); // не работает
    border: 1px dashed red;
}

если пишу например так
    height:calc(var(--Step) * 3 - 2px);

то все нормально, уже весь мозг сломал, может attr() имеют ограничения при работе с числами?
   acht
 
1 - 20.03.21 - 14:57
Попробуй
    attr(data-d-w number)
   vde69
 
2 - 20.03.21 - 15:00
(1) пробовал, и integer тоже пробовал
   vde69
 
3 - 20.03.21 - 15:18
нашел ответ:

Функция attr работает только в паре с content

то есть ее кроме как для контекста применять никуда нельзя... печалька...
   Вафель
 
4 - 20.03.21 - 15:28
а что хотел то.
наверняка можно куда проще
   Вафель
 
5 - 20.03.21 - 15:29
если хочеь в хтмл задавать высоту, то может проще через стайл?
   vde69
 
6 - 20.03.21 - 16:06
(5) мне нужен универсальный стиль. Что бы хтмл был минимальным. Ну и адаптивность...
Сейчас мне нужен div который будет по верх основного вывода
   Василий Алибабаевич
 
7 - 20.03.21 - 16:12
(0) Как то оно больше на LESS похоже чем на css. А оно не стандарт. Напрямую не работает. Нужно подключать правильный скрипт. Или "компиллировать" в css.
   vde69
 
8 - 20.03.21 - 16:31
Наверно сделаю так

html
  <div class="decoration" style="--w:3;--h:5; --l:1; --t:1; --n:Heat">-</div>
   Вафель
 
9 - 20.03.21 - 16:53
(7) однако переменные уже давно в стандарте
   Вафель
 
10 - 20.03.21 - 16:55
покажи на картинке чтотв итоге получается.
   Вафель
 
11 - 20.03.21 - 16:55
может пооще грид какой или флекс?
   Вафель
 
12 - 20.03.21 - 16:57
жесткое задание размеров это бэд практис
   Вафель
 
13 - 20.03.21 - 16:58
а -2px лучше маржином или паддингом делать
   vde69
 
14 - 20.03.21 - 17:36
   Генератор
 
15 - 20.03.21 - 17:37
var же работает, задавай их в style, а дата атрибуты в js используют, можно написать функцию которая из data достанет и пропишет в style
   vde69
 
16 - 20.03.21 - 17:39
   Генератор
 
17 - 20.03.21 - 17:45
Всякую статику типа js css можно же на другой сервер выложить если из сети доступ есть
   Fragster
 
18 - 20.03.21 - 21:41
переходи на vue, там вычисляемые стили и классы элементарно делаются
   Доктор Манхэттен
 
19 - 21.03.21 - 05:24
(16) Какой-то огромный у тебя веб-сервер.
У меня вот такой: https://i.ebayimg.com/images/g/ZwkAAOSwRUNfOmTU/s-l500.jpg

И памяти в нем дофига, хоть видео в 4К закачивай, все потянет.
   Вафель
 
20 - 21.03.21 - 10:23
а трубы как рисуешь?
   Вафель
 
21 - 21.03.21 - 10:23
(18) а каков итоговый размер жс?
   vde69
 
22 - 21.03.21 - 11:18
(20) я сейчас переделал, стала вообще красивенько и удобно.
Доделаю код самого сервера, выложу куда нибудь.

Сейчас все файлы занимают менее 100кб
   Fragster
 
23 - 21.03.21 - 16:12
(21) сама либа - килобайт 40 несжатых, 25 сжатых примерно, а там как наворотишь.
   Fragster
 
24 - 21.03.21 - 16:12
третья версия, вроде, поменьше, но там ие11 не завезли
   Fragster
 
25 - 21.03.21 - 16:13
да и всякие уикиты пока тоже не все обновились


Список тем форума
 
ВНИМАНИЕ! Если вы потеряли окно ввода сообщения, нажмите Ctrl-F5 или Ctrl-R или кнопку "Обновить" в браузере.
Тема не обновлялась длительное время, и была помечена как архивная. Добавление сообщений невозможно.
Но вы можете создать новую ветку и вам обязательно ответят!
Каждый час на Волшебном форуме бывает более 2000 человек.