Previous Entry Share Next Entry
2016-01

CSS WTF of the day.

Черт, я только что написал сортировку на CSS.

(требует поддержки flexbox, впрочем, он уже везде поддерживается.)

UPD: http://codepen.io/wizzard0/pen/KghIE (осторожно, глоза!)

UPD2: если хочется более generic сортировки, можно сделать bitonic sorter, но с меня на сегодня хватит и radix.

This entry was originally posted at http://wizzard.dreamwidth.org/377285.html. It has comment count unavailable comments. Please comment there using OpenID.
Tags: ,

  • 1
juan_gandhi June 23rd, 2014
А у меня такое ощущение, что я CSS вообще никогда не пойму.

wizzard0 June 23rd, 2014
Я не могу назвать это сколько-нибудь essential знанием...

Особенно с учетом скорости, с которой оно меняется.

victorgr June 23rd, 2014
Так а что там, в сущности, понимать? Если на базовом уровне.

Декларативное описание того, как элементы должны выглядеть (цвет, размер, шрифт) и располагаться относительно друг друга.

wizzard0 June 23rd, 2014
...которое занимает 100500 страниц, имеет десяток слегка отличающихся реализаций, и местами внутренне противоречиво даже на уровне спеки ;)

А задумка была хороша, да.

victorgr June 23rd, 2014
Но суть и базовые концепции ведь достаточно просты :)

(Deleted comment)
wizzard0 June 23rd, 2014
Меня смутило, что контейнер должен знать об том, что в нем содержится.

Ну а потом выяснилось, что это несложно совсем.

As an added bonus, можно сделать табличку, которая будет сортироваться по критериям даже без JS.

jakobz June 23rd, 2014
Реально, табличку на CSS отсортировать?

wizzard0 June 23rd, 2014
Ну...

TR не сортируется. Только дивы :(

Но из них можно изобразить табличку!

wizzard0 June 23rd, 2014
См. апдейт.

shabunc June 23rd, 2014
codepen или не было.

wizzard0 June 23rd, 2014
http://codepen.io/wizzard0/pen/KghIE (осторожно, глоза!)

если хочется более generic сортировки, можно сделать bitonic sorter, но с меня на сегодня хватит.



Edited at 2014-06-23 10:58 pm (UTC)

shabunc June 24th, 2014
ну вы ж понимаете что тут есть жульничество ;)
вы не сортируете ничего -вы описываете что такой-то класс должен идти (визуально) таким-то по порядку.

да, есть flex-box-овое свойство order, но оно ничего не сортирует - оно кладёт в том порядке в котором сказали.

kodt_rsdn June 23rd, 2014
Ждём калькулятора на CSS, бейсик на CSS и, чем чёрт не шутит, Firefox OS на CSS

wizzard0 June 23rd, 2014
Калькулятор можно в FF сделать. Только унылый.

shabunc June 24th, 2014
средствами чистого css-а нельзя. ну или я узнаю сегодня что-то новое, что тоже хорошо)

victorgr June 24th, 2014

wizzard0 June 24th, 2014
Лол :)

В Firefox если юзать var() и calc() то попроще будет, имхо.

shabunc June 24th, 2014
опять-таки- обращаюсь к вам и к автору треда
вы понимаете что это не калькулятор?

и calc() и var() тут не очень помогают.

напишите логический гейт на css-е
хотя похоже нет, ничего нового я всё-таки сегодня не узнаю )))

shabunc June 24th, 2014
оооо, тут мы приходим вплотную к философскому вопросу считать ли такое turing complete-ом.
Варианта тут два - либо вы лучше меня разбираетесь в теме, либо хуже.

Вполне могу допустить что разбираетесь вы лучше)

но для меня это не машина
с тем же успехом я могу закодировать в css-е все предвычесленные значения скажем факториала и показывать их по display:none у

но на этом я остановлюсь и не буду более перечить)

ps calc всё равно не при чём - мы не можем отстайлить один элемент на основании параметров другого произвольного.

wizzard0 June 24th, 2014
> считать ли такое turing complete-ом.
1. Есть длинное и нудное доказательство, что эту фигню можно превратить в эквивалентную тьюринг-машину, и обратно, где одно состояние тьюринг-машины - один ряд флажков, а вниз у нас типа ось времени.

2. Но лично я не согласен, что это именно *вычисления*, потому что оно не обновляет автоматически элементы дальше, чем на 1 уровень ниже :(

> calc всё равно не при чём - мы не можем отстайлить один элемент на основании параметров другого произвольного.
Есть такая штука https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables но нигде не поддерживается.

Короче, можно сделать шаг МТ, но машина по спеке должна уметь много шагов, поэтому считаем, что CSS сейчас не тьюринг-полный язык. Но очень близко уже ;-)

shabunc June 24th, 2014
о, это будет прекрасный новый мир)

109 June 23rd, 2014
the question now is whether css is turing-complete.

wizzard0 June 23rd, 2014
It is, in a *very* contrived way though.
https://github.com/elitheeli/stupid-machines/blob/master/rule110/rule110-full.html

Sorting is limited to one step of a radix sort, too, however it might be possible to implement a full bitonic sorter in CSS.


Edited at 2014-06-23 11:00 pm (UTC)

maxim June 24th, 2014
Шото еа 920 не работает.

wizzard0 June 24th, 2014
Влом дописывать -ms- и прочее

mbr June 24th, 2014
После сумматора (читай - базового модуля АЛУ компьютера), реализованного на 10 тысячах костяшек домино, меня в мире айти уже не удивить...

  • 1
?

Log in

No account? Create an account