На почти каждой конференции разработчиков вот-вот будет доклад, в котором будет вот эта «смешная гифка»:
Питер Гриффин из одноименного мультсериала пытается закрыть жалюзи и запутывает их напрочь, дергая за веревки как попало, пока не выходит из себя и срывает их с окна. Надпись на картинке: «CSS».
Публика всегда такое любит, и отсюда можно удачно перейти к рассказу о проблемах CSS и примерам их решения. Но в большинстве случаев — и чем более «технарская» это конференция, тем вероятнее — это начало тирады о том, какая гадость этот CSS, до чего ужасна его архитектура и как он нелогичен. И т.д., и т.п...
Вот что: я сыт этим по горло. Это не остроумно, это не соответствует действительности, и мы из-за этого выглядим напыщенными всезнайками, которым лишь бы всё работало как привычнее. Это возводит жесткий барьер между «разработчиками» и «людьми, делающими всякую веб-всячину», они же «ненастоящие разработчики». А это чушь. Наглая, опасная чушь, не помогающая нам — ни капельки — развивать наше сообщество разработчиков, чтобы в него хотелось влиться новым людям, самым разным.
Есть факт: мы делаем невероятно сложные, впечатляющие и красивые штуки в вебе. В самой демократичной системе распространения информации и — на сегодняшний день — на высокотехнологичной и потрясающей программной платформе. Если вы думаете, что знаете каждую ее грань и справитесь со всем этим без помощи других коллег-знатоков — вы ослеплены собственной самоуверенностью. И я не стал бы тратить время на работу с таким выпендрёжником.
Да, стебаться над CSS и его «франкенштейнистым» синтаксисом легко. Также легко показать, что все его задачи можно решить и другими технологиями. Но это не дает права — вообще — принижать и игнорировать людей, которым нравится CSS и для которых он — любимое орудие для создания великолепных пользовательских интерфейсов.
Другими словами: не нравится — не пользуйтесь. Работайте с кем-то, кому нравится. К гадалке не ходи, что если использовать технологию, которую вы не принимаете всерьез и не любите, то на выходе получится лажа. Это потеря времени. Когда вы жалуетесь на трудности из-за того, что вам хотелось, чтобы технология прогнулась под правила вашей зоны комфорта, вы на самом деле жалуетесь на то, что не осилили ее. У тех, кому повезло полюбить технологию и овладеть ее сильными сторонами, нет таких трудностей.
Еще то и дело всплывает вот эта кружка с надписью «CSS потрясающий»:
Это шутка про то, что CSS не годится для решения этой проблемы с вылезающим текстом. Что ж, скажите мне, а как тут надо было поступить? Добавить прокрутку? В CSS это возможно. Просто обрезать текст? Тоже можно. Обрезать и добавить в конце многоточие? Можно и так. Будет ли хоть одно из этих решений хорошим? Нет. Главное здесь то, что текст не влез в контейнер. А фиксированный контейнер в вебе — это ошибка. Нельзя фиксировать что-либо в среде, которая по определению может быть какого угодно размера и форм-фактора. Так что ошибка здесь в мышлении фиксированными контейнерами, а вовсе не в том, что CSS не делает чего-то по волшебству с неподконтрольным вам текстом. Оно наверняка наделало бы вам бед в интерфейсах.
Слабо вам взглянуть на те умопомрачительные штуки, что делает на CSS Ана Тюдор, и сказать мне в лицо, что это «ненастоящее программирование» и сделано на «тупом языке»?
Пример на CodePen
Только попробуйте не увидеть преимуществ флексбоксов и той возможности создавать динамические интерфейсы, подстраивающиеся к количеству контента и к потребностям экранов любого размера, которую они нам дают, как рассказывает о них Зои Микли Гилленуотер:
А сможете ли вы не прийти в восторг от могущества грид-раскладки, о которой рассказывает Рейчел Эндрю?
Попытайтесь не потерять голову от красоты построения сложных раскладок с помощью текста и фигур, не скованных жестко-пиксельным мышлением, как это объясняет Джен Симмонс.
И попробуйте только не поразиться мощи CSS-фильтров с режимами наложения и тому простору для художественного творчества, что они открывают, как объясняет Юна Кравец:
Видео на Vimeo
Так что в следующий раз, когда захотите «смешно пошутить про CSS», имейте в виду, пожалуйста, что разбирающиеся в нем люди отнюдь не буковки перекрашивают. CSS — очень выразительный язык для создания сложных интерфейсов, покрывающий множество разнообразных потребностей пользователей. Если вы не в силах всё это осознать — и я сам признаю, что больше уже не в силах — имейте совесть не принижать тех, кто осознаёт. Лучше поблагодарите их за этот труд и работайте с ними вместе.
Комментарии (214)
aktuba
06.10.2016 15:07-25Хм… Но ведь css действительно ущербный, хоть и достаточно мощный. Примерно как php. Поэтому его всегда будут ругать, это нормально.
stepanp
06.10.2016 15:09-19Согласен в том плане, что CSS по сравнению с другими web-технологиями (HTML5, node, и т.п.) еще вполне себе ок и логичнее поливать грязью их.
Об ущербности же CSS говорит хотябы сам факт существования вещей вроде less или sass.
В нем даже констант нету, зато каждый год добавляют всякую ерунду типа 3d-transform.Xandrmoro
06.10.2016 15:12+9Бесполезное (кроме как для показать «какие мы крутые») 3d завезли, а центрирование без костылей — нет :(
AkpoFlash
06.10.2016 15:27+12Многие функции аля «какие мы крутые», добавить значительно проще, т.к. они не нарушают никаких зависимостей и в итоге достаточно просто интегрируются, но многие вещи которые кажутся на первый взгляд легкоизменяемыми, такими не являются.
А по поводу центрирования, разве при помощи display: flex эта проблема не решается в несколько строк?
vintage
06.10.2016 20:14+2А что за костыли нужны для центрирования?
Xandrmoro
07.10.2016 01:47От неочевидного margin: auto до чуть более очевидных, но и более костыльных сдвигов на -50% (или изменения высоты строки).
А просто vertical-align и horizontal-align — нет, вы что, это слишком просто.vintage
07.10.2016 07:09+2Во первых margin:auto — вполне себе очевиден, если хоть раз читали спеку на тему отступов.
Во вторых align-items:center и justify-content:center таки есть, но слишком форсируют центрирование, что как правило не нужно.
danSamara
07.10.2016 09:06+1Как должно происходить выравнивание, когда установлено horizontal-align:center, а у блока есть margin-right:0?
Cryvage
07.10.2016 09:51+2Ну раз горизонтальное выравнивание установлено по центру, значит и отступы должны считаться от центра. Мысленно проводим вертикальную линию через центр и от нее считаем. Конкретно в случае margin-right:0 ничего не изменится, т.к. 0 он и в африке 0. Будет просто выравнивание по центру. А вот при margin-right:10px, будет сначала выравнивание по центру, а затем дополнительное смещение влево на 10px.
Это на вскидку. Возможно я чего-то не учел.danSamara
07.10.2016 18:28+3На мой взгляд, это ещё безумнее чем есть сейчас — считать краевые отступы от центра!
Меняем выравнивание — точки отсчётов отступов меняются.
Народ и так недоволен костыльностью CSS — так ещё такое.
Xandrmoro
07.10.2016 14:25Центрировать по внешней границе, определённой box-sizing'ом, и после этого добавлять маржины.
AkpoFlash
06.10.2016 15:23+2В данный момент на основе опыта полученного при взаимодействие с препроцессорами в спеки активно добавляются вещи которые во многом превосходят всякого рода «константы», например кастомные свойства.
Последние несколько лет CSS активно разрабатывается и улучшается, безусловно у CSS еще множество проблем, но называть его ущербным я бы не стал.
aikixd
07.10.2016 13:16+1В сях тоже есть препроцессор, но вы же не поливаете его?
Free_ze
07.10.2016 16:36+1Еще как поливаем!
Половина С++ — это попытка хоть как-то контролировать препроцессор (шаблоны (и все, что с ними связано), inline-функции, лямбды (в некоторой степени), etc), но и то порой не сахар.
spmbt
06.10.2016 15:17-9Чего действительно не хватает в CSS, это препроцессора, регулярных выражений и функционального подхода. И тогда JSON-библиотеку, адаптированную к CSS, каждый сам себе напишет.
izzholtik
06.10.2016 15:18+23Веб и так не совсем в порядке, пожалуйста, не надо ему регулярных выражений)
Dolbe
06.10.2016 15:25-2Можно и регулярок добавить, почему нет?
Главное — не брать в руки чужой CSS код с регулярками)
Talyutin
06.10.2016 16:18+13Твой же код станет тебе чужд через N месяцев.
Dolbe
06.10.2016 16:25+2Да, я этого и не отрицаю, а тут сразу минусы посыпались. Видимо, кого-то задел, как казалось, безобидной шуткой =(
mayorovp
07.10.2016 08:49Нет, это вы сами шутку не распознали.
“Если у вас есть проблема и вы решили использовать регулярные выражения, у вас уже две проблемы”
PS относитесь к минусам проще. В карму-то вам никто не плюнул, то есть с сайта вас не изгоняют. Просто намекнули что комментарий не к месту.
Dolbe
07.10.2016 10:33“Если у вас есть проблема и вы решили использовать регулярные выражения, у вас уже две проблемы”
Про это я знаю, спасибо. Вы считаете, что я именно эту шутку не распознал? По-вашему, мой комментарий как-то противоречит этой шутке?
PS К минусам, как и к карме, отношусь абсолютно нейтрально, обе эти сущности не доставляют мне ни радости ни огорчения. А про «намекнули»… Ну тут сложно сказать, что он не к месту, ибо сначала там стало 5 минусов, сейчас всего 3. Как-то и 3 и 5 человек, поставивших минус, это слишком уж мало, чтобы думать, что комментарий реально на ресурсе не к месту.
justboris
06.10.2016 16:14+7А какого плана регулярки вам нужны?
Если хочется, то уже сейчас можно делать так
//все ссылки, начинающиеся на http, сделать красными a[href^="http://"] { color: red; }
кроме матчинга с начала строки, так же есть аналогичные
attr$=valueдля конца строки, иattr~=valueдля поиска слова целиком в строке.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Cryvage
06.10.2016 15:44+16Почему вместо «horizontal-align: center», я должен писать «margin: 0 auto»? Это риторический вопрос, конечно. Да и это далеко не единственная и не главная проблема CSS. Просто первое, что вспомнилось. Это первое, что меня когда-то взбесило в нем. Так уж сложилось, что CSS достаточно кривая технология. Что имеем, то имеем.
Это возводит жесткий барьер между «разработчиками» и «людьми, делающими всякую веб-всячину», они же «ненастоящие разработчики».
Не понимаю причем тут это? Какой еще барьер? Почему вы так болезненно воспринимаете критику CSS? Вы что, разрабатывали этот стандарт? А если нет, то к вам нет никаких претензий. Люди критикуют CSS, а вовсе не тех, кто им пользуется.
Другими словами: не нравится — не пользуйтесь.
А вот с этим проблема. В этом весь ужас фронтенда. На бэкенде, там да, там есть выбор. Если мне не нравится, скажем, PHP, то я могу выбрать ASP.Net, Python или Ruby. Да вообще много из чего можно выбрать. С фронтендом так не получится. Там приходится жрать что дают. Не нравится CSS или JavaScript? Или, может быть, HTML? Тебе все равно придется их использовать. Именно поэтому мыши продолжают жрать кактус. При этом, не упуская возможности поплакать об этом.
Antelle
06.10.2016 16:07-1Вопрос не риторический, ответ — потому что вы хотите поддерживать старые браузеры.
Archon
06.10.2016 16:12+3С фронтендом так не получится. Там приходится жрать что дают. Не нравится CSS или JavaScript? Или, может быть, HTML? Тебе все равно придется их использовать.
Точно так же, как на веб-бекенде всё равно придётся использовать IP, TCP и HTTP. Это просто ограничение платформы, называющейся «веб». Не нравится — можно перестать писать под эту платформу и начать писать, например, под мобильные устройства, десктопы, или какую-нибудь встраиваемую фигню. Только быстро выяснится, что там ограничений не меньше, устаревших технологий даже больше, и — сюрприз — тоже приходится жрать, что дают.
Вы просто немного подменили понятия. HTML/CSS/JS в браузерах — не совсем языки, а скорее очень сложное, но конечное и неизменяемое API браузера. Соответственно, вы посредством какого-то языка (или даже без него) собираете набор вызовов вида «дорогой браузер, нарисуй мне тут, пожалуйста, заголовок», и передаёте это в браузер. Выбор языка при этом остаётся на ваше усмотрение, всё по-честному, а вот API браузера поменять не удастся.izzholtik
06.10.2016 16:39+2Есть ещё одна большая разница: на сервере можно сделать «как хочется», обернув недружелюбный HTTP в десятки мегабайт удобных абстракций. На клиенте же вам этого сделать никто не даст.
Archon
06.10.2016 16:45+8А что же тогда делают jQuery и ещё 100500 «удобных библиотек и фреймворков для веб-разработчика»? Именно это и делают, оборачивают не очень дружелюбные вызовы функций браузера напрямую через свои более красивые (и более медленные) абстракции.
Cryvage
06.10.2016 17:39+6API браузера поменять не удастся
Можно конечно считать, что HTML/CSS/JS это как бы браузерное API, но разве это значит, что API не нужно улучшать и расширять? Конечно, web-программист этого сделать не может, а вот разработчики браузеров и стандартов — вполне. Этого от них и хотят, на это и направлена критика того же CSS. Только не поймите меня не правильно, я не призываю срочно что-то менять. И вовсе не уверен, что критика CSS на всяких конференциях принесет существенный профит. Я лишь высказал свою точку зрения, почему многие люди ругают CSS. Из-за ограниченности платформы они вынуждены им пользоваться, альтернатив нет, а динамика развития, ну субъективно, она хуже, чем у JS, например.
И если уж говорить об ограниченности платформ, то TCP/IP и HTTP это все же немного не то, о чем я говорил. Речь ведь не о принципиальном наличии каких-то ограничений, а о том, что на бэкенде их меньше, и что очень важно, они менее заметны в повседневной работе. Сколько процентов в коде составляет работа с протоколом HTTP? А язык это то, с чем ты работаешь все 100% времени. Еще раз повторюсь, можно конечно считать что CSS это часть браузерного API. Но в то же время это язык, на котором человек пишет код. Он очень глубоко погружается в этот API. Общение с технологией выходит довольно тесное, отсюда и высокая придирчивость. Не получается просто так смириться с недостатками. Так-то недостатки можно найти во всем. Тот же HTTP, тоже не идеален, и не всех устраивает. Не зря же Google экспериментировал с SPDY, на основе которого потом выкатили HTTP/2. Последний, впрочем, тоже довольно жестко критиковали. Так что, все закономерно, люди критикуют то, что им не нравится, особенно, когда отказаться от этого проблематично. Это настолько очевидно, что я даже ничего бы не стал писать тут в комментариях, но меня смутило то, что автор статьи как-то странно воспринимает критику CSS. Словно эта критика как-то оскорбляет верстальщиков. Но мне не понятно причем тут они, особенно учитывая тот факт, что у них и альтернативы-то нет. Возможно это обратная сторона того тесного общения с технологией, а которой я упомянул. Получается какое-то сочувствие к используемому инструменту.
mdss
07.10.2016 08:57Консорциум W3 состоит в основном из крупных компаний, в том числе и компаний выпускающих браузеры. Так что разработчики браузеров и стандартов это одни и те же люди. К слову, стандарты постоянно дополняются, появляется что-то новое. Но не забывайте про тот факт, что реализация той или иной фичи должна устраивать всех. Что является плюсом, т.к. появляется единый стандарт. И именно к этому шли столько лет. Я думаю все уже устали от того, что было ранее, от этой разрозненности.
franzose
07.10.2016 04:03Почему вместо «horizontal-align: center», я должен писать «margin: 0 auto»?
Потому что нет особого смысла вводить еще одно свойство, достаточно понять логику.
autoв данном случае означает автоматический расчет отступов по краям.
S_A
06.10.2016 15:51+2Слабо вам взглянуть на те умопомрачительные штуки, что делает на CSS Ана Тюдор, и сказать мне в лицо, что это «ненастоящее программирование» и сделано на «тупом языке»?
Такие кубики на паскале в школе делали в 90-х. И что, теперь именно это — настоящее программирование? На брэйнфаке при желании тоже можно кубик написать, сервером и CSS-фронтендом. И даже заставить работать в Canary или Firefox Night Build.
А так обычно в гос. организациях каких-нибудь стоят хрюши с в лучшем случае IE9 и без этого кубика им конечно никуда… Ну и естественно про flex тоже можно не вспоминать. Иногда смотришь в caniuse и грустишь.
Короче очень уж спорная аргументация в статье, возражения из плоскости «не делаешь кубики на CSS — не говори что он неудобен» и «не нравится не ешь».justboris
06.10.2016 17:13А на что именно вы смотрите в caniuse и грустите?
IE9 уже настолько непопулярный, что его там даже не показывают:
https://habrastorage.org/files/d7f/f20/1cb/d7ff201cb351433f8e53247488c8ad9c.png
Есть еще, правда, IE8, но там своя ретро-атмосфера, за которую нужно брать дополнительную оплату так-то.
S_A
06.10.2016 18:11+6Я же всё написал. Есть еще дремучие случаи, когда IE9 используется. Мало ли что caniuse скрывает — и то что он скрывает IE9 это кстати еще +1 повод погрустить.
Суть претензий, по полкам.
1. CSS — язык стилей. Многие естественные для тех же десктопных интерфейсов стили в нём проблематичны.
2. IE9 — боль. Я бы с удовольствием отказался бы от поддержки. Но никак. Пользователи WinXP — имеют IE9. Как минимум до установки Chrome.
3. Аргументы в статье омерзительны. Кубиками доказывать что CSS это круто — ну бред же. Видел слайдеры «кубические», даже в десятке работают… ну профита никакого — ни юзеру, ни заказчику.
4. Сам верстаю. И пишу. Fullstack. И node.js и sass и jade и даже php и прочее.
5. Веб-фронтенд — имхо конечно — следовало бы двигать в сторону системы лайаутов какие они были еще в java.awt релиза 2000-х. Но веб пошел другим путем. В этом возможно только моя личная печаль.
6. Я против фронтенд-разработчиков (верстальщиков как их тут называют слегка пренебрежительно по-моему) ничего не имею — я за них двумя руками за. И по-моему, CSS у них головная боль куда меньше, чем jQuery, которому многие из них памятник бы поставили.
7. Да, CSS развивается. Да, с учетом legacy.
НО. Почему черт побери я должен считать CascadeStyleSheets языком программирования, и почему, черт побери я не должен считать его неудобным (даже для стилей интерфейсов)? Бох с ними с браузерами. Если CSS так хорош, почему есть PostCSS, SASS/LESS/STYLUS, и ими пользуются и хвалят? Почему я должен считать вращающийся кубик чем-то крутым, когда похоронили wrml в своё время, в котором такой кубик в гораздо более понятном и коротком коде вращался? И почему я должен впечатлятся кубиком, который никому не нужен в каком-нибудь интернет-магазине, а нужно юзать какой-нибудь sticky.js для плавающих контейнеров? Вопрос риторический. Сами все понимаете.
SomebodyElse
06.10.2016 18:17+2А вы в курсе, что пользователи WinXP ограничены только IE8, и поддерживать IE9 не имеет смысла?
Psychosynthesis
26.01.2017 18:33+7Я кажется больше на хабре залипаю, чем в соцсетях последнее время =(
spmbt
07.10.2016 00:02+1WinXP ограничен Хромом 49 (и Хромиумом), что не очень плохо, и не ограничен Firefox-ом.
raveclassic
07.10.2016 00:10Вы сейчас просто весь мой мир сломали. Завтра же пойду пинать начальство отказываться от поддержки.
justboris
07.10.2016 01:21Если CSS так хорош, почему есть PostCSS, SASS/LESS/STYLUS, и ими пользуются и хвалят
Есть машиночитаемый код, а есть исходники.
CSS изначально был заточен для легкого разбора и интерпретации. Не вижу ничего плохого в использовании специальных иструментов для подготовки кода браузеру.Free_ze
07.10.2016 11:52+2Какой смысл молниеносно парсить CSS, если будет тормозить соединение, выкачивающее тонны этого избыточного кода? Очевидно, что отвратительный дизайн обязан чьей-то не самой удачной идее в начале и длительной поддержке с помощью нагромождения костылей.
Веб-инструменты славились динамичностью, без необходимой компиляции. В мире программирования эта фаза нужна для оптимизации на семантическом уровне и только в вебе таким образом стараются абстрагироваться от стрёмного браузерного API (в широком смысле).justboris
07.10.2016 12:11Избыточность решается алгоритмами сжатия.
Основная идея в том, что css — это таблица, то есть данные, которые не нужно исполнять. Для динамики в браузере есть javascript, а css статический, без шансов словить бесконечный цикл или какую-нибудь ошибку компиляции.
Если вам нужно что-то посложнее, миксины или переиспользование кода, надо брать препроцессор и тогда все эти ошибки исполнения вылезут при сборке, а не у пользователей в браузере.
Saffron
07.10.2016 12:54> без шансов словить бесконечный цикл или какую-нибудь ошибку компиляции.
устаревшие сведения.
https://github.com/elitheeli/stupid-machines
http://lemire.me/blog/2011/03/08/breaking-news-htmlcss-is-turing-complete/
justboris
07.10.2016 13:02Открыл страницу в браузере, ни циклов, ни ошибок не увидел.
К чему вы привели эти ссылки?mayorovp
07.10.2016 14:21https://jsfiddle.net/78yahLg8/
Вот вам ошибка. Пусть и глупая, но самая настоящая, мешающая прочитать текст. И отсутствие компиляции не помогло...
justboris
07.10.2016 14:25Еще как помогло!
У вас есть отдельная невалидная конструкция, но это никак не ломает остальные стили.
В то время как ошибка в Javascript или другом языке вызовет остановку и программа дальше исполняться не пойдет.
Free_ze
07.10.2016 16:51В то время как ошибка в Javascript или другом языке вызовет остановку и программа дальше исполняться не пойдет.
Это всегда контролируемое поведение, для этого существует механизм исключений.
aikixd
07.10.2016 14:28+1Имеется ввиду что в идеале вы не можете написать css который можно особо не проверять и он не положит браузер, а не то, что верстальщик не налажает.
Saffron
07.10.2016 17:49Вы наверное, настоящий веб-разработчик, не имеете профильного образования и даже не представляете, чего теряете. Тьюринг-полнота это возможность построить и циклы вообще, и некорректные, в частности.
justboris
07.10.2016 17:57-1Здравствуйте! Спасибо за замечание о моем образовании.
В указанной статье показывается, как построить вычислительную машину в браузере силами HTML+CSS. В этой ситуации они являются лишь составными частями, но не самим языком.
С таким же успехом можно называть Тьюринг-полными микросхемы и шестеренки, из которых строятся компьютеры. Но, согласитесь, что это немного не то.
Saffron
07.10.2016 19:35-1Есть большая разница. Микросхемы и шестерёнки в компьютер надо собирать руками, что требует значительного времени и ресурсов. А копирование компьютерных программ почти ничего не стоит, и значит реализацию цикла будет несложно воспроизводить. Дорога от возможности до реализации короче и воспроизводима.
Free_ze
07.10.2016 16:46+1Избыточность решается алгоритмами сжатия.
То есть вместо того, чтобы сделать умный интерпретатор и не испытывать боли, мы будем делать умные (на уровне языковой семантики) компрессоры/декомпрессоры?
Bellicus
07.10.2016 12:53+1Если CSS так хорош, почему есть PostCSS, SASS/LESS/STYLUS
Если C так хорош, почему есть C++, C#, Java, Objective-C.
Да потому что, это естественный процесс развития чего бы то не было. Есть языки, и есть люди которых они не устраивают, и они вкатывают свои реализации, под свои нужды.
Так, в принципе, все яп появились.S_A
07.10.2016 13:02-1Вы уверены, что отвечаете на тезис «не надо ругать CSS»? Вы пишете на C то же, что другие на C++/C#/Java/Objective-C?
Ogi
06.10.2016 16:05+11HTML — дерьмо.
CSS — дерьмо.
JavaScript — дерьмо.
Node.js — дерьмо.
jQuery — дерьмо.
PHP — дерьмо.
Смерть неизбежна.
zenkz
06.10.2016 16:21+1CSS — просто супер-вещь!
Конечно немного нехватает наследования и прочих плюшек (для которых есть куча инструментов вроде less/sass) и не всегда предсказуемый синтаксис (например разместить блок без чётких размеров по центру экрана), но зато как легко можно изменить дизайн сайта подправив всего несколько строчек кода. Кто ругает CSS, тот просто не умеет им пользоваться…
Тут скорее нужно ругать разработчиков браузеров с их разной обработкой комманд и префиксами. Конечно может быть в будущем будет хорошая замена CSS, но я думаю это случится не раньше чем через 5-7 лет. Да и скорее просто CSS продолжит эволюционировать становясь всё удобнее. Например переход к 3 версии CSS был огромным шагом вперёд.
Gaikotsu
06.10.2016 19:57+2> Конечно может быть в будущем будет хорошая замена CSS, но я думаю это случится не раньше чем через 5-7 лет.
Ага, только вот будет как обычно — было X стандартов, стало X + 1. И все их потребуется поддерживать.
vintage
06.10.2016 20:27-1senia
07.10.2016 09:31+2Подскажите, пожалуйста, что я должен там увидеть.
https://habrastorage.org/files/17e/45e/a36/17e45ea3699f448a9ee785ea03698844.png
CrazyNiger
07.10.2016 13:20-1Думаю, что-то типа этого (вертикальное центрирование)
aon24
07.10.2016 00:09Можно на CSS сделать так, чтобы секунды на экране не пересчелкивались, а плавно прокручивались?
Что-то типа барабана с цифрами.
В JS я могу один раз вызвать прокрутку (задать атрибут, для которого в CSS прописаны padding-top и transition).
Вопрос, как ее взбодрить потом?
Спасибо.
Alex_ME
06.10.2016 16:49+8Дисклеймер: я не фронтенд-разработчик. Я
халтурщик на все рукиfull-stack фрилансер. Я куда больше разбираюсь в backend (ASP.NET), но приходится и верстать. Я многого не знаю, и опыт мой в CSS скуден.
Все это говорю со своей позиции дилетанта.
Каждый раз, когда я что-то делаю, у меня обязательно возникает "WAT" от очередной нелогичности CSS (да-да, я сам сделал криво). Из последнего: я выравнивал inline-block элемент по вертикали, применил классический подход с table-cell, и он растянулся на всю высоту родителя. Я долго смотрел на это и думал, как же исправить, и как я делал раньше, если все работало.
Да, есть приемы, да, нужно все знать и иметь опыт, это я не отрицаю. Но некая "недерменированность" CSS, когда поведение элемента зачастую странным и не очевидным образом зависит от совершенно других — разрдажает. Да, я понимаю, что причина этому — особенности реализации, и поток элементов расположить совсем как угодно не так уж и легко.
vintage
06.10.2016 20:29+5А вы ожидали, используя вещи не по назначению, что всё будет работать как вам надо? Что за "классический подход с table-cell"?
Alex_ME
06.10.2016 22:42-16 методов вертикального центрирования с помощью CSS ., метод №2. Присутствует практически в каждой статье про вертикальное выравнивание.
vintage
06.10.2016 23:09+6Не читайте статей пятилетней давности — ничего полезного вы оттуда уже не узнаете.
Ohar
06.10.2016 21:39+2Из последнего: я выравнивал inline-block элемент по вертикали, применил классический подход с table-cell, и он растянулся на всю высоту родителя. Я долго смотрел на это и думал, как же исправить, и как я делал раньше, если все работало.
Из последнего: я выравнивал пользовался грязным хаком, который я даже не понимаю, как работает и что-то пошло не так. Я долго смотрел на это и думал, как же исправить, и как я делал раньше, если все работало.
Alex_ME
06.10.2016 22:45+4Я предупредил, что я профан в этом деле.
С помощью гугла я нашел несколько способов вертикального выравнивания, например, использовать line-height родителя, равный высоте или задание родителю display:table, потомку display:table-cell и vertical-align.
И да, все способы вертикального выравнивания, что я видел — грязные хаки. 80% "как сделать XXX в CSS" — грязные хаки. Собственно это и есть моя главная претензия к CSS — все делается грязными хаками.
А так, я буду очень рад узнать, как вертикально выравнивать блочные элементы без грязных хаков.
Ohar
06.10.2016 23:00Собственно это и есть моя главная претензия к CSS — все делается грязными хаками.
Это, к сожалению, так.
Частично из-за того, что стили, придуманные для гибкого веба, пытаются применять к макетам, нарисованным для неизменяемой полиграфии.
Частично из-за того, что не все потребности веб-дизайнеров были предусмотрены авторами спецификаций.
vintage
06.10.2016 23:09+1Ohar
06.10.2016 23:14+1Кроссбраузерность флексбокса делает меня страдать.
vintage
06.10.2016 23:46+1Вы из тех бедолаг, которых заставляют поддерживать ие9 в 2016 году?
raveclassic
07.10.2016 00:16Поверьте, мы еще есть…
justboris
07.10.2016 01:23+2Вроде в соседней ветке вас убедили больше его не поддерживать, разве нет?
raveclassic
07.10.2016 01:42Я то давно в этом убежден. Увы, есть бизнес.
danSamara
07.10.2016 09:28+2Увы, есть бизнес
Да, и он умеет считать деньги. И, как правило, счёт не в пользу устаревшей технологии:
Мой разговор с человеком из бизнеса (крупный интернет-магазин):
— (я) Судя по статистике, у вас около 5% пользователей на ie8, но поддержка этого браузера отсутствует, почему?
— У нас была поддержка, но мы её закрыли, т.к. на поддержку этого устаревшего браузера уходит больше денег, чем приносят пользователи, которые им пользуются.
Дальше он показал мне точные цифры, по которым было видно, что разница стоимость поддержки / прибыль была около порядка!raveclassic
07.10.2016 10:11Полностью согласен, но мне попался редкий частный случай, когда бизнес понимает расходы, но когда есть группа клиентов, сидящих на IE9, которых не поддерживать ну никак нельзя.
Zenitchik
07.10.2016 11:53Как я Вас понимаю. У нас — как раз наиболее жирные клиенты сидят на ворованной ХР. (И, вероятно, до скончания веков на ней сидеть будут).
sumanai
07.10.2016 22:12Этот славный ИЕ9… Мой работодатель передал слова дизайнера в ответ на вопрос «Какие версии ИЕ поддерживаем»:
Там вроде нет спецэффектов что бы в ie6 не отображалось что то.
Я конечно высказал своё мнение на счёт ие6 и того дизайнера, и продолжил делать так, чтобы в ие8-9 была изящная деградация (минус скругления и тенюшки), но осадочек остался.
SelenIT3
07.10.2016 18:33Кроссбраузерность флексбокса лучше кроссбраузерности бордер-радиуса.
Для России и др. постсоветских стран CanIUse выдает заниженные проценты, т.к. не учитывает Я-браузер и других локальных «хромят». Если приплюсовать их суммарную долю, цифры сравняются с общемировыми.Ohar
07.10.2016 18:39+2Вы Show all забыли нажать.
Да даже если бы у них была одинаковая кроссбраузерность — это всё равно бы не позволило использовать флексбокс в продакшене ещё года два, потому что флексбоксом делается раскладка страницы, и без него она просто развалится в хлам, а бордер-радиус — это просто симпатичная свистелка, от отсутствия которой внешний вид становится чуть хуже.SelenIT3
07.10.2016 18:56Show all не меняет картину качественно (особенно если в придачу нажать еще и Usage relative). Некоторые браузеры CanIUse, увы, не учитывает в принципе (см. внизу).
В простейшем случае без флексбоксов раскладка не «развалится в хлам», а изящно деградирует до минималистичной одноколоночной версии а-ля мобильная. Которая зато молниеносно грузится и мгновенно реагирует на действия юзера, что куда более критично для того ископаемого железа, на котором доживают свой век бесфлексовые IE и андроид-браузеры 4.3-.
В наш адаптивно-отзывчиво-мобайлфёстный век гламурные раскладочные навороты — именно что симпатичная свистелка, и ее вполне можно добавлять как постепенное улучшение!Ohar
07.10.2016 20:07Я вам, наверное, открою секрет, но вёрстка с помощью позиционирования и маржинов точно так же молниеносно загрузится, но не развалится при этом вообще нигде. Про какие раскладочные развороты вы говорите, я не знаю.
Bellicus
07.10.2016 14:47+1Буду сильно утрировать…
Так то я гуманитарий, но иногда балуюсь математикой. И каждый раз, когда я что-то делаю, у меня обязательно возникает «WAT». Вот из последнего, попытался найти квадратный корень из бесконечности поделенной на ноль, и вселенная перезагрузилась… Говно, эта ваша, математика.
Если вам не хватает опыта, и вы не понимаете, как что устроено внутри языка, не значит что язык плохой. Это значит лишь, что вам не хватает опыта и вы не понимаете как что устроено внутри языка.
gricom
07.10.2016 15:48+2В свое время, когда я в школе только начинал программировать, то пробовал и паскаль, и html, и css, но в случае с html+css постоянно чувствовал себя какой-то обезьяной, которая не понимает, что делает, потому что если ваша программа на паскале некорректна — она не скомпилируется. И там даже будет текст ошибки! А если она упадет в рантайме, то вы тоже получите сообщение об ошибке, и если из этих сообщений вам всё еще непонятно, что происходит, то можно добавить отладочный вывод в консоль, можно поставить брекпоинт и т.д. Вы понимаете, к чему я клоню?
Если ваш элемент на странице отрисовался не так, как вы планировали, то вы можете только догадываться, почему же это так. Потом вы, конечно начнете читать доку, анализировать её и заниматься прочими полезными вещами, но вы так и будете сами работать дебаггером.
Надо ли говорить, что после того, как я больше часа потратил на выравнивание содержимого ячейки таблицы, у меня даже мысли не было заниматься вебом. Я еще со школы помню то чувство, когда ты даже не знаешь, куда начинать копать.vbif
07.10.2016 15:50-1ctrl+shift+I?
gricom
07.10.2016 15:55+2Во-первых, во времена моей школы я о таком не знал, и я даже не уверен, что это было.
Во-вторых — это не совсем ответ. Инспектор показывает вам результат, но вы не всегда можете понять, почему он такой. Вы добавляете какой-нибудь align-center (не помню, как оно точно называется), а у вас ничего не происходит, и вы не знаете почему.aikixd
07.10.2016 22:27Если вы не знаете что именно делает тот или иной элемент API, то чему вы удевляетесь? Если я за 2-3 минуты не понял почему оно не работает, я открываю спек. И не только css, с любой вещью так. Просто вам почему-то кажется что веб должен быть простым и веселым и потратить 4 часа на решения какой нибудь мелочи можно только в «настоящем» яп.
gricom
07.10.2016 22:50+2в том-то и дело, что на бекенде на решение мелочи я потрачу 10 минут. Если не пойму, то открою дебаггер и посмотрю, что происходит. А на фронте я должен кучу вещей именно знать, потому что там нюансы и костыли на каждом углу
f0rmat1k
09.10.2016 19:24+2Доля ИЕ9+10 в России в совокупности составляет в среднем 0.5%. Перестаньте уже выдумывать, что в каких-то абстрактных непонятных случаях вас просят во что-бы то ни стало сделать вертикальное выравнивание для этих браузеров. И начните пользоваться flexbox-ом.
Alex_ME
09.10.2016 22:08Признаю, я был не прав. Как я и сказал — я нуб. Ну благодаря комментариям здесь, узнал много нового. Спасибо!
Zenitchik
11.10.2016 16:48Корпоративный, мать его, клиент. Основной, между прочим, источник дохода.
А добиться одинакового вида во всех современных браузерах, я считаю — норма.SelenIT3
11.10.2016 18:09одинакового вида во всех современных браузерах
1) выделенное слово — не ключевое?
2) в Safari на айфоне и Самсунг-браузере на «умном телевизоре» тоже вид должен быть одинаковым?Zenitchik
13.10.2016 21:18- Да, ключевое. В старых браузерах просто должно как-нибудь работать.
- Прошу прощения, не могу ответить. Я занимаюсь не сайтами, которые смотрят на любых устройствах, а приложениями для дистанционного обучения, рассчитанными если не на десктоп, то по крайней мере на планшет с крупным экраном. Опыта вёрстки под телефоны и телевизоры не имею. Вероятно, я сделаю отдельные версии для названных устройств, если получу команду поддерживать и их тоже.
Durimar123
06.10.2016 16:49+2ИМХО CSS отличная задумка, нормальная реализация,
Если бы они оставили CSS просто как дополнительный способ назначения параметров, было бы ок, но они покусились на полную отмену HTML.
Реализовали они это убого через псевдо классы (например first-of-type).
C чего-то разработчики CSS решили, что могут простым переназначением параметров убрать все тэги оставив абстрактные box и inline+ css настройки, и это почти получилось, пока они не уперлись в table, list и т.п.
И их реализация Table tr td через CSS просто отстой.
А поддерживать (рендер машине) надо.
Короче, жадность фраера сгубила.
В прочем этим страдают многие, например авторы Imap -отличный формат, но зачем его сделали ХУМАН_РИДИБЛ ???? Куча гемора и лишних данных, а нужных наоборот не вставить.Ohar
06.10.2016 21:41+3они покусились на полную отмену HTML
Вы точно не путаете семантическую структуру (HTML) документа с его отображением (CSS) на экране?Durimar123
07.10.2016 11:05Я к тому, что разработчики CSS в плотную подошли к полной отмене за ненадобностью всех тегов форматирования, оставив два основных: div для бокс элементов и span для inline, заменив установку дефаулт параметров через CSS стили.
Но обломились на комплексных типа tabel и list, у которых по мимо параметров есть поведение. А попытки CSS разработчиков преодолеть эту проблему привели к нагромождениям и уродcтву в довольно стройной (до этого) идеологии.
Причем тут синтаксис HTML и рендер ДОМ объектов не понял.Ohar
07.10.2016 11:20+1Я к тому, что разработчики CSS в плотную подошли к полной отмене за ненадобностью всех тегов форматирования
Разработчики CSS не подходили и не собирались подходить к такому.
Они просто дали авторам очень гибкий инструмент и некоторые из авторов начали забивать микроскопами гвозди, попутно жалуясь, что ручка не очень удобная.
Durimar123
07.10.2016 13:02>Разработчики CSS не подходили и не собирались подходить к такому.
Вряд ли вы анализировали CSS на столько, что бы утверждать подобное.
Впрочем это легко узнать: какие есть тэги форматирования которые нельзя сэмулировать используя DIV, SPAN и CSS?Ohar
07.10.2016 15:05Рукалицо.
HTML — это стандарт семантической разметки документа с помощью тегов.
Расскажите, пожалуйста, как вы собрались семантику эмулировать с помощью CSS, эмулятор вы наш. Очень интересно послушать.Durimar123
07.10.2016 15:17Т.е. вы не знаете, как используя только div и span сделать любое форматирование? Яж об этом и говорил: ваши знания скорее всего из другой области, а значит и понимания не возможно.
vbif
07.10.2016 15:21+1Для вас веб-страница — это только текст и форматирование его на экране?
Durimar123
07.10.2016 15:41-1Для моей задачи да, HTML страница это ДОМ объекты (боксы и текст) форматированные на экране. Плюс переходы и всякие мелочи.
vbif
07.10.2016 15:44+1Если речь идёт о страничке, которую никто, кроме вас не увидит — пользуйтесь тем, что удобно лично вам.
Durimar123
07.10.2016 17:38-1Не понял, что еще собой представляет HTML как не форматированные боксы и инлайны?
И я не создаю страницы я их отображаю.
Отсюда и отношение к CSS
Плюсы CSS он строгий и легко парсится, в отличии от HTML.
Минусы, заставляет редактировать уже созданные объекты или дожидаться полной загрузки блоков, с HTML такого нет — кусок загрузился, создал для него объекты, отобразил.SelenIT3
07.10.2016 18:24+1HTML представляет собой структуру данных, на основании которой можно построить визуальную структуру боксов (инлайновых, блочных, плавающих, табличных, флексовых, гридовых, черто-в-ступочных и т.д.). Причем строится она по правилам CSS.
А можно построить по этим же данным еще что-нибудь. Не обязательно визуальное.Durimar123
07.10.2016 18:31Дерево объектов с параметрами причем объектов двух типов box & inline.
Float это параметр для box объекта
Table это совокупность box объектов. И т.д.
Visible = false это тоже параметр объекта.SelenIT3
07.10.2016 18:41Визуальный объект всё-таки box. А уже box бывает разных типов — block, inline и еще куча более редких. Голый текст «два» между абзацами в конструкции
в визуальной структуре — box типа inline (обернутый в анонимный box типа block), а в HTML — вообще даже не элемент, а лишь текстовая нода.<p>раз</p> два <p>три</p>
У элемента есть параметр, создавать ли box или нет. А если создавать — то какого типа.Durimar123
07.10.2016 18:49Сложно не согласится.
Но с уточнением, Inline элементы (текст, img, inlinebox, input и т.д.) это всеже самостоятельный визуальный объект с совсем другим поведением и параметрами, нежели объект box.SelenIT3
07.10.2016 19:04Если речь о геометрических параметрах (ширина/высота, внешние/внутренние отступы и т.п.), то у inline box'ов они те же, что у любых других. Другие у них алгоритмы, по которым эти параметры рассчитываются и применяются. Да, поведение. Но box'ами они от этого быть не перестают:)
dshster
27.01.2017 21:17Если HR не может найти страницу в соцсети, то это не значит что её нет — может быть у кандидата с десяток фейковых аккаунтов для троллинга со всех сторон или еще чего не публичного. Сплошь и рядом такое.
Durimar123
07.10.2016 14:36-1Они нарушают HTML принцип: считал, создал, отформатировал.
Появляется зависимость от еще не считанных и не обработанных тегов, т.е. последующие влияют на предыдущие.
Также некоторые псевдо классы используемые в теге заставляют создавать несколько объектов, причем иногда перед уже созданными.vbif
07.10.2016 15:15поясните примерами, что ли
Durimar123
07.10.2016 15:26Ну например last, заставляет дождаться окончания считывания блока тэгов с выходом на родителя что бы появилась возможность прогнать через стили и назначит параметры, а учитывая что параметры могут сильно влияют на форматирование, невозможно сделать нормальное отображение блока пока он полностью не загружен.
В чистом HTML (или без псевдоклассов) такого почти нет, т.е. сколько считал столько показал.
И еще больший тупизм — before
Т.е. мало того что я не могу нормально показать считанные данные, так еще иногда приходится вставлять ПЕРЕД уже созданными объектами новый объект.
и т.д.vintage
07.10.2016 22:26+2Не ПЕРЕД, а ВНУТРИ.
Durimar123
10.10.2016 10:55-1Шаблонно мыслите.
У объекта с параметром before в 99% будут внутренние объекты, для которых объект созданный по параметру content будет ПЕРЕД ними.vintage
10.10.2016 11:31Они будут созданы уже после.
Durimar123
10.10.2016 11:37Т.е вы считаете, что еще до закрытия тэга можно узнать какие CSS стили ему подходят?
На чем основывается ваша уверенность. Есть опыт, построения DOM?
Aingis
10.10.2016 11:57А DOM тут не причём. Речь же об отображении. На основе DOM и CSSOM строится дерево отображения, и вот уже туда всё вставляется по очереди.
https://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/Durimar123
10.10.2016 14:30«На основе DOM и CSSOM строится дерево отображения,»
«DOM тут не причём».
Не находите что-то странное в этих утверждениях?
Впрочем это не важно, повторяю
1 во время считывания и обработки тэгов, невозможно гарантированно прогнать Тэг по CSS стилям, пока не будет закрыт тэг родителя. (из-за last-child)
2 из-за п1 и after нужно или дожидаться полного считывания HTML прежде чем строить объекты, или превращать HTML viewer в HTML editor, что бы появилась возможность делать inser в уже готовые и отображенные объекты.
а это нарушает потоковый принцип ХТМЛ и т.д. выводы читай выше.Aingis
10.10.2016 18:31Не нахожу ничего странного, если прочитать и осмыслить комментарий полностью.
1. А никто и не прогоняет теги (на самом деле элементы) во время парсинга. Это происходит чуть позже, как я и написал в предыдущем комментарии, который надо прочитать и осмыслить полностью.
2. Не обязательно. Можно это делать, например, в перерывах между приходами чанков. Потом, правда, надо стили пересчитывать, что добавляет накладные расходы, но никаких запретов нет, это всё на усмотрение реализации. См. ссылку в моём предыдущем комментарии, который надо прочитать и осмыслить полностью.Durimar123
10.10.2016 18:441 А зачем создавать объекты «позже»?
Юзерам важно отобразить как можно быстрее.
Считал, распарсил, создал объекты, отобразил.
2 пересчет стилей = удаление/изменение старых объектов.
А все из-за убогости пары никому не нужных параметров CSS, о чем я и говорил.mayorovp
10.10.2016 19:31Вы так пишите, как будто css — единственное препятствие на пути отображения по мере загрузки!
А таблицы? Картинки? Что насчет картинки в плавающем блоке?
Durimar123
11.10.2016 10:55Как бы тема о CSS и я написал что мне нравится и что мешает в этом отличном по началу языке.
Кроме того картинки, дозагрузка таблиц и floatbox, не влияет но основные меняет параметры объектов, а в основном на форматирование строк.
vbif
10.10.2016 20:32Если эти параметры не нужны ВАМ, не значит, что не нужны НИКОМУ.
Durimar123
11.10.2016 11:03Кто бы спорил, но только не я, а учитывая, что моя задача не делать CSS, а выводить, я такие извращенные HTML насмотрелся…
Так что полностью с вами согласен, все, все что только можно изгадить или извратить, все будет использовано.
ps
подскажите какая есть задача, где вы, вынужденны использовать эти параметры?vbif
11.10.2016 11:49Классический пример: делаем меню горизонтальной строчкой, между пунктами меню — разделители.
.menu li{display:inline; white-space:nowrap;}
.menu li::before{content:" | ";}
.menu li:first-of-type::before{content:"";}SelenIT3
11.10.2016 13:20+1При таком раскладе, кажется, как раз ничего пересчитываться не должно? Первый ли
liв списке или нет (в отличие от того, последний ли он там), известно сразу, как только до него дошел парсер?
Durimar123
11.10.2016 15:05Ужас. :)
Но это еще не худший вариант (для рендер машины), а живой пример с last-of-type есть?
SelenIT3
10.10.2016 13:29+2::before и ::after не требуют информации о контенте элемента. Они требуют лишь его наличия (ну и допустимости их для этого элемента — напр. для пустых и замещаемых элементами они по одним спекам запрещены, по другим — не определены). Так что браузеру ничто не мешает сразу при создании бокса для элемента создать и боксы для его ::before и ::after — а потом, по мере построения боксов для его дочерних элементов, добавлять их между ними.
Вот :empty, :last-child и :nth-last-*, действительно, должны либо дождаться закрытия элемента, либо перестраиваться «на лету» при добавлении каждого потомка. Поэтому они и медленные.Durimar123
10.10.2016 16:23«Пришел лесник и всех выгнал.»©
Вы привели хороший разбор проблематики CSS, которую сколько я не объяснял, некоторые так и не захотели понять.
sbnur
06.10.2016 16:57La vie, voyez-vous, ca n’est jamais si bon ni si mauvais qu’on croit. — Guy de Maupassant
А css — это жизнь
Shamov
06.10.2016 17:31+1На самом деле, брак Анны Болейн был признан недействительным. Так что она никак не может быть Тюдор.
Saffron
06.10.2016 17:37Вот скажите, зачем вообще сделали HTML + CSS тьюринг-полным? Пока, создаётся такое впечатление, что действительно хотели наговнять
dom1n1k
06.10.2016 17:59+7То что язык CSS кривоват — это медицинский факт.
Последние годы ситуация в этой области, конечно же, заметно улучшилась и нам стало казаться, что CSS стал мощный, гибкий и в умелых руках способен творить чудеса. Отчасти это так, но лишь на фоне того, что было 5-10 лет назад. Если посмотреть непредвзято, то можно заметить и несуразности, и костыли, и проблемы с поддержкой. Даже нынешний любимец публики — Flexbox — и тот вызывает вопросы.
А все те «умопомрачительные» демо, которые можно найти где-нибудь на codepen, обычно невероятно замудрены и костыльны. Это просто прикольные упражнения для мозгов. В реально работе 90% того кода неприменимо.
guyfawkes
06.10.2016 18:18+6Демо Анны выглядят интересно, но за внешней простотой скрываются:
— циклы, «спрятанные» в Haml и SCSS (на самом деле делается 6 раз по 256 дивов-тайтлов)
— малопонятные значения вида (что это значит и зачем оно я лично сразу понять не могу и как это можно поддерживать остается загадкой)
$p: 50%/($n - 1)* ($j + abs((1 - $mod)*($n - 1) - $k)); @if $mod > 0 { $p: 100% - $p; }
YaakovTooth
06.10.2016 18:58+3Какой-то пост странный, сплошные эмоции, какой-то разговорный сленг — это всё больше уместно для личной днявочки по-моему.
Siddthartha
06.10.2016 19:22+1вы совершенно не виноваты, что и стандарт и реализации вам достались (пока что) проблемные сильно. ругают и стебутся не над профи, пытающимися достичь свободы самовыражения на сss, а над всем тем, что мешает этому.
Alexey2005
06.10.2016 19:51А как вообще получилось, что родилась связка html+css? Ведь ко времени зарождения Web'а уже существовала такая отличная штука, как TeX, где всё тоже human-readable и где контент отделён от форматирования. И были уже готовые движки для рендеринга этой штуки.
Ну ведь логично было бы не изобретать костыли на коленке, которые вполне закономерно получились кривыми, а использовать уже отлаженное и проверенное временем решение.
Source
06.10.2016 21:00+1У TeX порог входа повыше, да и он во многом заточен именно под вёрстку книг, а не одной большой страницы неопределенных габаритов.
SelenIT3
07.10.2016 01:53+2Там была долгая история… Основной упор был на быстроту передачи смысловой части по хилым каналам и адаптацию отображения для конкретного пользователя/ситуации (да, HTML с самого начала был адаптивным:). Но многое решил и слепой случай, как обычно.
mayorovp
07.10.2016 09:17Либо я вас неправильно понял, либо он был с самого начала резиновым, а не адаптивным.
SelenIT3
07.10.2016 13:29Придерживаюсь глубокого убеждения, что резина — простейший частный случай адаптивности. Но адаптивность HTML никогда ей не исчерпывалась (см. те же консольные браузеры, телетайпы и т.п.).
jakobz
06.10.2016 22:35+4Интерфейсы, которые я в 10-м классе делал в дельфи за час мышкой, сейчас целыми командами делают неделями. Покажите мне готовый грид-компонент, хотя бы близкий по скорости и фичам к аналогам хотя бы того что 20 лет назад было в delphi.
Верстка текста в вебе — как была говном, так и осталась. Где переносы уже, где выключка по ширине? А ведь текст в браузерах читают уже сильно больше чем в книгах и газетах. Оно даже долбаный текст не научилось рисовать.
Веб настолько плох, что у любого хабра и жежешки, уже есть мобильная аппа, удобнее браузера.
Веб должен умереть. И можете мне не петь про обратную совместимость: выкинуть веб в мире где люди ходят в фейсбук и почту через мобильные аппы — вообще не проблема.Alex_ME
06.10.2016 22:53+3Простите, оффтоп, но выскажусь про мобильные приложение. Это исключительно мое личное мнение.
Когда какое-то приложение не предоставляет каких-то особых функций\оффлайна\производительности по сравнению с мобильной версией сайта — оно должно умереть.
Там нельзя:
- выделять текст
- делать поиск
- открывать вкладки
- добавить какую-то конкретную страницу в закладки
- переслать кому-то ссылку
На эту тему есть комикс XKCD
Заголовок спойлера
sleeply4cat
06.10.2016 23:04В 7 андроиде наконец можно «из коробки» копировать ссылки из многих клиентов, в которых можно что-то расшаривать.
Alex_ME
06.10.2016 23:08Так возможность расшаривания должна быть предусмотрена разработчиком, если я все правильно понял. А в браузере всегда можно скопировать адрес.
Я никому не навязываю эту точку зрения, но на 100% согласен с этим
sleeply4cat
06.10.2016 23:12Печально, но мне тоже проще сделать клиент под андроид, чем писать мобильный сайт, который будет работать так же хорошо.
darkdaskin
07.10.2016 19:19В случае SPA от адреса в браузере толку мало, если разработчик не предусмотрел его смену при навигации внутри приложения.
sumanai
07.10.2016 23:20если разработчик не предусмотрел
Если разработчик не предусмотрел, то можно много на что жаловаться, но виноват в этом разработчик, а не технология.
Alex_ME
09.10.2016 22:10Вроде как в большинстве фреймворков для SPA есть роутинг в том или ином виде (Angular, react-router, ...). Если роутинга нет вообще — это как-то очень печально. Я не припомню, чтобы встречал подобное. Это скорее исключение, чем правило.
vintage
06.10.2016 23:06+1Покажите мне готовый грид-компонент, хотя бы близкий по скорости и фичам к аналогам хотя бы того что 20 лет назад было в delphi.
Покажите, для начала, что там было в Дельфи.
Где переносы уже, где выключка по ширине? А ведь текст в браузерах читают уже сильно больше чем в книгах и газетах.
Вы, видимо, проспали то время, когда в вебе было модно делать текст с выключкой по ширине и с переносами. Сейчас уже так не делают. Подумайте почему.
SelenIT3
07.10.2016 01:42Переносы уже везде, только хромята ещё хромают, но и там буквально на днях пофиксили. Не везде (как говорят, сам пока глубоко не исследовал) словари этих переносов для русского языка (и др. языков кроме англ.). Но есть большое подозрение, что с правильным атрибутом lang и словари будут находиться чаще…
Saffron
06.10.2016 23:09+1> Интерфейсы, которые я в 10-м классе делал в дельфи за час мышкой, сейчас целыми командами делают неделями.
Сейчас, кстати, и нативные десктопные приложения не брезгуют css для задания собственных стилей.
FSA
07.10.2016 12:41+1Эти интерфейсы, в большинстве своём, были для фиксированного размера окна и элементов в нём. Некоторые заморачивались и через костыли делали растягивающиеся окна. Но в любом случае, размер элементов всегда остаётся одним и тем же. А вот с сайтами можно делать всё что угодно: увеличивать, уменьшать размеры элементов, просматривать на экранах с портретной и ланшафтной ориентацией экрана и даже адаптироваться под маленькие экраны!
mayorovp
07.10.2016 12:54-1Анкер на две противоположные стороны — и элемент растягивается вместе с окном!
Жаль только что в каждой линии такой элемент можно только один делать.
Ohar
07.10.2016 15:15+1Где переносы уже
Переносы отлично работают, если их расставить в тексте заранее с помощью
­. А если вы хотите авторасстановку переносов браузером для каждого известного науке языка, то у меня для вас плохие новости — эта задача ещё не решена.
Вам надо подключать огромное количество словарей и всё равно оно будет работать хуже, чем проверка грамматики.
dcc0
06.10.2016 23:15Анимация классная.
sleeply4cat
06.10.2016 23:17У меня кубик 1.3 ФПС выдаёт.
dcc0
06.10.2016 23:22Мой первый опыт общения с CSS был именно как на картинке. Но тогда я еще даже учебник не прочитал, только справочник немного, а так, делал по аналогии — открывал какой-нибудь сайт в режиме просмотра кода и грязно заимствовал: )
MTonly
06.10.2016 23:20+1Проблема не в CSS или других веб-стандартах, а в том, что при разработке спецификаций почти не учитывается обратная связь от практикующих веб-разработчиков и даже простая и полезная функциональность, для стандартизации и реализации которой требовались бы минимальные усилия, игнорируется годами.
Например, спустя 10 лет (!) у нас всё ещё нет возможности переопределить отдельный фоновый слой без необходимости повторять все остальные слои. Не говоря уж о генерации виртуальных контейнеров средствами CSS.spmbt
07.10.2016 00:24у нас всё ещё нет возможности переопределить отдельный фоновый слой без необходимости повторять все остальные слои.
Если мы о правилах слоя, но не о слое, то — есть, но никто этим не пользуется, т.к. не принято — надо обратиться к правилу document.styleSheets[i].rules[j] и поменять там selectorText или style. Изменится правило для любого слоя. Но, как видно, подход неудобен, потому что принято, что правила статичны. Нет именованных списков и есть хаотично создающиеся таблицы правил styleSheets, за количеством которых никто не следит по причине их условной «статичности» — как бы ни определил, результат будет тот же.
А если мы о слое, в который вложены другие — то же самое, неудобной манипуляцией с нодами можем сделать что угодно — подменить, удалить, дочерние ноды рассовать по другим местам, без необходимости переписывания. Но принято переписывать.
Вот с контейнерами (если вы о компонентах) — действительно, у CSS проблемы.MTonly
07.10.2016 00:35Я о множественных фонах в CSS и виртуальных контейнерах, генерируемых средствами CSS.
mdss
07.10.2016 09:10-1Как часто вы используете множественные фоны? Я думаю это свойство не дорабатывают именно из-за того, что частота использования множественного фона стремится к нулю.
По генерации виртуальных контейнеров. CSS стилизует элементы. Именно в этом его предназначение. Оставьте динамический контент для других стезей.Aingis
07.10.2016 14:17+1Множественные фоны хотели, когда делали закруглённые уголки и подобные извращения картинками. А сейчас, когда есть `border-radius`, `border-image`, во времена «плоского» простого дизайна, оказывается, что они не так уж и нужны. Не говоря уж о переопределении.
MTonly
07.10.2016 18:59+1думаю это свойство не дорабатывают именно из-за того, что частота использования множественного фона стремится к нулю.
Когда требуется — тогда использую, и очень рад, что для этого нет необходимости засорять HTML-разметку дополнительными вложенными элементами. А не дорабатывают в общем случае потому, что заняты «более важными или трудоёмкими» (но не обязательно востребованными в веб-разработке) вещами. Конкретно для переопределения фонового слоя обсуждался вариант синтаксиса с указанием слоя с помощью индекса:background[0], но для этого потребовалось бы менять базовый синтаксис CSS (core syntax), а этого там боятся как огня, даже если на самом деле в конкретном случае это совершенно безопасно с точки зрения обратной совместимости.
CSS стилизует элементы. Именно в этом его предназначение.
А виртуальные контейнеры, по-вашему, для чего нужны? Именно для применения стилей к визуальным группам элементов без необходимости засорять HTML-разметку лишёнными семантического смысла элементамиDIV/SPAN, нужными только для применения стилей.
Iqorek
07.10.2016 01:06+1Мои претензии к CSS:
1. Плохо читабелен, прочитав CSS код нельзя понять, как будет выглядеть конечная картинка. Когда CSS много, то по читабельности он может соревноваться с ассемблером, конкретно, что вот эта строчка делает понимаю, а что будет когда все вместе, нужно смотреть на результат в броузере с открытым инспектором.
2. Следствие пункта номер 1, тяжело поддерживать. Часто переделать все с нуля, в разы быстрее, чем что то подправить в существующем коде. Если у вас не получается победить грабли, любовно расставленные предыдущим верстальщиком, попробуйте этот метод.vbif
07.10.2016 12:27+1Сложность CSS отчасти продиктована сложностью того, чем ей приходится управлять — текста. Который к тому же отображается в не самых предсказуемых условиях. Ты не знаешь ширину и разрешения экрана у пользователя, не можешь быть уверен в поддержке тех или иных опций браузера, да даже содержание текста. И всё это должно определённым образом двигаться, реагировать на действия пользователя.
MTonly
07.10.2016 19:00Плохо читабелен, прочитав CSS код нельзя понять, как будет выглядеть конечная картинка.
Можете привести пример такого CSS-кода?SelenIT3
07.10.2016 19:19Можно я, сыграю разок за противника? ;)
button { transition: background 0s 99999s } button:active { background: red; transition: none; }
<button onclick="this.style='background: green !important'"> Нажми меня </button>
Какого цвета будет кнопка после первого нажатия? :)
Но лично я вот во многом как раз за такие вещи CSS и люблю:)MTonly
07.10.2016 19:27Какого цвета будет кнопка после первого нажатия? :)
А что говорит практика? ;-)
Лучше расскажите, почему снова инкрементировали индекс в нике. Или всё это — разные люди? ;-)SelenIT3
07.10.2016 19:38Моя практика согласуется с моим пониманием стандарта — после первого нажатия красный, после второго и последующих зеленый :-)
Это была невеселая история… Но стараюсь смотреть в будущее, а не назад :-)
SelenIT3
10.10.2016 13:32UPD: практика в iOS 9.3 Safari преподнесла мне сюрприз — там кнопка остается красной и после последующих нажатий. Интересно, в чем дело — неужели в пресловутой 300-миллисекундной задержке?
MTonly
10.10.2016 16:35Браузеры Apple добровольно изолированы от большей части внешнего мира, будучи доступными только в экосистеме самой Apple (читай — без версий для других ОС), поэтому какие-то индивидуальные отклонения в них неудивительны, тем более в столь синтетических тестах.
GoodProject
07.10.2016 01:15Css отличная штука, хотя складывается впечатление что ошибок бывает много, приходится придумывать разные костыли, типа клирфикса, верт. позиционирования, надеюсь со временем всё это вообще уйдет в небытие ))
franzose
07.10.2016 04:10Есть такая вещь. Стандарт и реализация. Стандарт — вполне хорош, а вот реализация...
nicuini
07.10.2016 04:25+4Не хватит.
В вебе нет альтернатив CSS, ни в части селекторов (управление inline стилями через JS непроизводительно), ни в части графических возможностей (хотя некоторые от безысходности пытаются пилить интерфейсы на SVG или canvas).
И мы делаем «невероятно сложные, впечатляющие и красивые штуки в вебе» потому что мы хорошие разработчики, а не потому что это правильный инструмент.
Алсо откровенно сексистская подборка докладчиков не добавляет впечатления объективности от статьи.
Regis
07.10.2016 04:37+1Нет, не хватит.
Есть за что поливать.
А по поводу примеров и «доказательств»… В вебе можно найти очень крутые рисунки, сделанные попиксельно в MS Paint. Являются ли они доказательством того, что Pain продвинутый, удобный и самодостаточный редактор?
zooks
07.10.2016 09:56+1Просто мы слышим поколение нытиков-миллениумов. Все им не то и не так. Не прошли они через табличную верстку, однопиксельные распорки и адские хаки для кроссбраузерности.
CSS — отличный язык. Помню свое первое знакомство с ним в начале нулевых — когдаa:hoverвыглядело необычайно круто (ведь для интерактива был не нужен JavaScript). А сейчас все его «недостатки» полностью нивелировали Sass, Less и PostCSS. Браузеры с тех времен реально шагнули вперед, технологии фронтенда — тоже. Что-то неудобно — пиши свой миксин Sass или плагин для PostCSS и используй. Ной не ныл и ты не ной.
vbif
07.10.2016 11:35+1В качестве контраргумента к заявлениям о плохом синтаксисе приводить примеры с буханками из троллейбусов — это сильно.
Хотя я считаю разговоры о синтаксисе css не более чем вкусовщиной. И не надо мешать синтаксис с багами реализации.
SkazochNik
Ладно.