Может, хватит уже поливать грязью CSS на конференциях разработчиков?

Original author: Christian Heilmann
  • Translation

На почти каждой конференции разработчиков вот-вот будет доклад, в котором будет вот эта «смешная гифка»:


«смешная гифка»


Питер Гриффин из одноименного мультсериала пытается закрыть жалюзи и запутывает их напрочь, дергая за веревки как попало, пока не выходит из себя и срывает их с окна. Надпись на картинке: «CSS».


Публика всегда такое любит, и отсюда можно удачно перейти к рассказу о проблемах CSS и примерам их решения. Но в большинстве случаев — и чем более «технарская» это конференция, тем вероятнее — это начало тирады о том, какая гадость этот CSS, до чего ужасна его архитектура и как он нелогичен. И т.д., и т.п...



Вот что: я сыт этим по горло. Это не остроумно, это не соответствует действительности, и мы из-за этого выглядим напыщенными всезнайками, которым лишь бы всё работало как привычнее. Это возводит жесткий барьер между «разработчиками» и «людьми, делающими всякую веб-всячину», они же «ненастоящие разработчики». А это чушь. Наглая, опасная чушь, не помогающая нам — ни капельки — развивать наше сообщество разработчиков, чтобы в него хотелось влиться новым людям, самым разным.


Есть факт: мы делаем невероятно сложные, впечатляющие и красивые штуки в вебе. В самой демократичной системе распространения информации и — на сегодняшний день — на высокотехнологичной и потрясающей программной платформе. Если вы думаете, что знаете каждую ее грань и справитесь со всем этим без помощи других коллег-знатоков — вы ослеплены собственной самоуверенностью. И я не стал бы тратить время на работу с таким выпендрёжником.


Да, стебаться над CSS и его «франкенштейнистым» синтаксисом легко. Также легко показать, что все его задачи можно решить и другими технологиями. Но это не дает права — вообще — принижать и игнорировать людей, которым нравится CSS и для которых он — любимое орудие для создания великолепных пользовательских интерфейсов.


Другими словами: не нравится — не пользуйтесь. Работайте с кем-то, кому нравится. К гадалке не ходи, что если использовать технологию, которую вы не принимаете всерьез и не любите, то на выходе получится лажа. Это потеря времени. Когда вы жалуетесь на трудности из-за того, что вам хотелось, чтобы технология прогнулась под правила вашей зоны комфорта, вы на самом деле жалуетесь на то, что не осилили ее. У тех, кому повезло полюбить технологию и овладеть ее сильными сторонами, нет таких трудностей.


Еще то и дело всплывает вот эта кружка с надписью «CSS потрясающий»:


Кружка «CSS потрясающий»


Это шутка про то, что CSS не годится для решения этой проблемы с вылезающим текстом. Что ж, скажите мне, а как тут надо было поступить? Добавить прокрутку? В CSS это возможно. Просто обрезать текст? Тоже можно. Обрезать и добавить в конце многоточие? Можно и так. Будет ли хоть одно из этих решений хорошим? Нет. Главное здесь то, что текст не влез в контейнер. А фиксированный контейнер в вебе — это ошибка. Нельзя фиксировать что-либо в среде, которая по определению может быть какого угодно размера и форм-фактора. Так что ошибка здесь в мышлении фиксированными контейнерами, а вовсе не в том, что CSS не делает чего-то по волшебству с неподконтрольным вам текстом. Оно наверняка наделало бы вам бед в интерфейсах.


Слабо вам взглянуть на те умопомрачительные штуки, что делает на CSS Ана Тюдор, и сказать мне в лицо, что это «ненастоящее программирование» и сделано на «тупом языке»?


Пример на CodePen

Только попробуйте не увидеть преимуществ флексбоксов и той возможности создавать динамические интерфейсы, подстраивающиеся к количеству контента и к потребностям экранов любого размера, которую они нам дают, как рассказывает о них Зои Микли Гилленуотер:



А сможете ли вы не прийти в восторг от могущества грид-раскладки, о которой рассказывает Рейчел Эндрю?



Попытайтесь не потерять голову от красоты построения сложных раскладок с помощью текста и фигур, не скованных жестко-пиксельным мышлением, как это объясняет Джен Симмонс.



И попробуйте только не поразиться мощи CSS-фильтров с режимами наложения и тому простору для художественного творчества, что они открывают, как объясняет Юна Кравец:


Видео на Vimeo

Так что в следующий раз, когда захотите «смешно пошутить про CSS», имейте в виду, пожалуйста, что разбирающиеся в нем люди отнюдь не буковки перекрашивают. CSS — очень выразительный язык для создания сложных интерфейсов, покрывающий множество разнообразных потребностей пользователей. Если вы не в силах всё это осознать — и я сам признаю, что больше уже не в силах — имейте совесть не принижать тех, кто осознаёт. Лучше поблагодарите их за этот труд и работайте с ними вместе.

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 218

    +40
    Ладно.
      –25
      Хм… Но ведь css действительно ущербный, хоть и достаточно мощный. Примерно как php. Поэтому его всегда будут ругать, это нормально.
      –19
      Согласен в том плане, что CSS по сравнению с другими web-технологиями (HTML5, node, и т.п.) еще вполне себе ок и логичнее поливать грязью их.

      Об ущербности же CSS говорит хотябы сам факт существования вещей вроде less или sass.
      В нем даже констант нету, зато каждый год добавляют всякую ерунду типа 3d-transform.
        +9
        Бесполезное (кроме как для показать «какие мы крутые») 3d завезли, а центрирование без костылей — нет :(
          +12
          Многие функции аля «какие мы крутые», добавить значительно проще, т.к. они не нарушают никаких зависимостей и в итоге достаточно просто интегрируются, но многие вещи которые кажутся на первый взгляд легкоизменяемыми, такими не являются.
          А по поводу центрирования, разве при помощи display: flex эта проблема не решается в несколько строк?
            +2

            А что за костыли нужны для центрирования?

              0
              От неочевидного margin: auto до чуть более очевидных, но и более костыльных сдвигов на -50% (или изменения высоты строки).

              А просто vertical-align и horizontal-align — нет, вы что, это слишком просто.
                +2

                Во первых margin:auto — вполне себе очевиден, если хоть раз читали спеку на тему отступов.
                Во вторых align-items:center и justify-content:center таки есть, но слишком форсируют центрирование, что как правило не нужно.

                  +1
                  Как должно происходить выравнивание, когда установлено horizontal-align:center, а у блока есть margin-right:0?
                    +2
                    Ну раз горизонтальное выравнивание установлено по центру, значит и отступы должны считаться от центра. Мысленно проводим вертикальную линию через центр и от нее считаем. Конкретно в случае margin-right:0 ничего не изменится, т.к. 0 он и в африке 0. Будет просто выравнивание по центру. А вот при margin-right:10px, будет сначала выравнивание по центру, а затем дополнительное смещение влево на 10px.
                    Это на вскидку. Возможно я чего-то не учел.
                      +3
                      На мой взгляд, это ещё безумнее чем есть сейчас — считать краевые отступы от центра!
                      Меняем выравнивание — точки отсчётов отступов меняются.
                      Народ и так недоволен костыльностью CSS — так ещё такое.
                      0
                      Центрировать по внешней границе, определённой box-sizing'ом, и после этого добавлять маржины.
                        0
                        Какова будет логика работы фиксированных маржинов с auto, например
                        margin: 0 auto 0 10px
                        
                          –1
                          Устанавливать аналогично второму, если второй тоже auto — по нулям либо до границ контейнера (более ожидаемо).
                +5
                  +4
                  Можно дополнить еще этим, на русском:)
                    +2

                    тот случай, когда комментарии намного полезнее статьи)

                  +2
                  В данный момент на основе опыта полученного при взаимодействие с препроцессорами в спеки активно добавляются вещи которые во многом превосходят всякого рода «константы», например кастомные свойства.
                  Последние несколько лет CSS активно разрабатывается и улучшается, безусловно у CSS еще множество проблем, но называть его ущербным я бы не стал.
                    +1
                    В сях тоже есть препроцессор, но вы же не поливаете его?
                      +1
                      Еще как поливаем!
                      Половина С++ — это попытка хоть как-то контролировать препроцессор (шаблоны (и все, что с ними связано), inline-функции, лямбды (в некоторой степени), etc), но и то порой не сахар.
                  • UFO just landed and posted this here
                      –9
                      Чего действительно не хватает в CSS, это препроцессора, регулярных выражений и функционального подхода. И тогда JSON-библиотеку, адаптированную к CSS, каждый сам себе напишет.
                      • UFO just landed and posted this here
                          –2
                          Можно и регулярок добавить, почему нет?
                          Главное — не брать в руки чужой CSS код с регулярками)
                            +13
                            Твой же код станет тебе чужд через N месяцев.
                              +2
                              Да, я этого и не отрицаю, а тут сразу минусы посыпались. Видимо, кого-то задел, как казалось, безобидной шуткой =(
                                0

                                Нет, это вы сами шутку не распознали.


                                “Если у вас есть проблема и вы решили использовать регулярные выражения, у вас уже две проблемы”


                                PS относитесь к минусам проще. В карму-то вам никто не плюнул, то есть с сайта вас не изгоняют. Просто намекнули что комментарий не к месту.

                                  0
                                  “Если у вас есть проблема и вы решили использовать регулярные выражения, у вас уже две проблемы”

                                  Про это я знаю, спасибо. Вы считаете, что я именно эту шутку не распознал? По-вашему, мой комментарий как-то противоречит этой шутке?

                                  PS К минусам, как и к карме, отношусь абсолютно нейтрально, обе эти сущности не доставляют мне ни радости ни огорчения. А про «намекнули»… Ну тут сложно сказать, что он не к месту, ибо сначала там стало 5 минусов, сейчас всего 3. Как-то и 3 и 5 человек, поставивших минус, это слишком уж мало, чтобы думать, что комментарий реально на ресурсе не к месту.
                          +7

                          А какого плана регулярки вам нужны?


                          Если хочется, то уже сейчас можно делать так


                          //все ссылки, начинающиеся на http, сделать красными
                          a[href^="http://"] {
                            color: red;
                          }

                          кроме матчинга с начала строки, так же есть аналогичные attr$=value для конца строки, и attr~=value для поиска слова целиком в строке.


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

                          +16
                          Почему вместо «horizontal-align: center», я должен писать «margin: 0 auto»? Это риторический вопрос, конечно. Да и это далеко не единственная и не главная проблема CSS. Просто первое, что вспомнилось. Это первое, что меня когда-то взбесило в нем. Так уж сложилось, что CSS достаточно кривая технология. Что имеем, то имеем.
                          Это возводит жесткий барьер между «разработчиками» и «людьми, делающими всякую веб-всячину», они же «ненастоящие разработчики».

                          Не понимаю причем тут это? Какой еще барьер? Почему вы так болезненно воспринимаете критику CSS? Вы что, разрабатывали этот стандарт? А если нет, то к вам нет никаких претензий. Люди критикуют CSS, а вовсе не тех, кто им пользуется.
                          Другими словами: не нравится — не пользуйтесь.

                          А вот с этим проблема. В этом весь ужас фронтенда. На бэкенде, там да, там есть выбор. Если мне не нравится, скажем, PHP, то я могу выбрать ASP.Net, Python или Ruby. Да вообще много из чего можно выбрать. С фронтендом так не получится. Там приходится жрать что дают. Не нравится CSS или JavaScript? Или, может быть, HTML? Тебе все равно придется их использовать. Именно поэтому мыши продолжают жрать кактус. При этом, не упуская возможности поплакать об этом.
                            –1

                            Вопрос не риторический, ответ — потому что вы хотите поддерживать старые браузеры.

                              +3
                              С фронтендом так не получится. Там приходится жрать что дают. Не нравится CSS или JavaScript? Или, может быть, HTML? Тебе все равно придется их использовать.

                              Точно так же, как на веб-бекенде всё равно придётся использовать IP, TCP и HTTP. Это просто ограничение платформы, называющейся «веб». Не нравится — можно перестать писать под эту платформу и начать писать, например, под мобильные устройства, десктопы, или какую-нибудь встраиваемую фигню. Только быстро выяснится, что там ограничений не меньше, устаревших технологий даже больше, и — сюрприз — тоже приходится жрать, что дают.

                              Вы просто немного подменили понятия. HTML/CSS/JS в браузерах — не совсем языки, а скорее очень сложное, но конечное и неизменяемое API браузера. Соответственно, вы посредством какого-то языка (или даже без него) собираете набор вызовов вида «дорогой браузер, нарисуй мне тут, пожалуйста, заголовок», и передаёте это в браузер. Выбор языка при этом остаётся на ваше усмотрение, всё по-честному, а вот API браузера поменять не удастся.
                              • UFO just landed and posted this here
                                  +8
                                  А что же тогда делают jQuery и ещё 100500 «удобных библиотек и фреймворков для веб-разработчика»? Именно это и делают, оборачивают не очень дружелюбные вызовы функций браузера напрямую через свои более красивые (и более медленные) абстракции.
                                  +6
                                  API браузера поменять не удастся

                                  Можно конечно считать, что HTML/CSS/JS это как бы браузерное API, но разве это значит, что API не нужно улучшать и расширять? Конечно, web-программист этого сделать не может, а вот разработчики браузеров и стандартов — вполне. Этого от них и хотят, на это и направлена критика того же CSS. Только не поймите меня не правильно, я не призываю срочно что-то менять. И вовсе не уверен, что критика CSS на всяких конференциях принесет существенный профит. Я лишь высказал свою точку зрения, почему многие люди ругают CSS. Из-за ограниченности платформы они вынуждены им пользоваться, альтернатив нет, а динамика развития, ну субъективно, она хуже, чем у JS, например.
                                  И если уж говорить об ограниченности платформ, то TCP/IP и HTTP это все же немного не то, о чем я говорил. Речь ведь не о принципиальном наличии каких-то ограничений, а о том, что на бэкенде их меньше, и что очень важно, они менее заметны в повседневной работе. Сколько процентов в коде составляет работа с протоколом HTTP? А язык это то, с чем ты работаешь все 100% времени. Еще раз повторюсь, можно конечно считать что CSS это часть браузерного API. Но в то же время это язык, на котором человек пишет код. Он очень глубоко погружается в этот API. Общение с технологией выходит довольно тесное, отсюда и высокая придирчивость. Не получается просто так смириться с недостатками. Так-то недостатки можно найти во всем. Тот же HTTP, тоже не идеален, и не всех устраивает. Не зря же Google экспериментировал с SPDY, на основе которого потом выкатили HTTP/2. Последний, впрочем, тоже довольно жестко критиковали. Так что, все закономерно, люди критикуют то, что им не нравится, особенно, когда отказаться от этого проблематично. Это настолько очевидно, что я даже ничего бы не стал писать тут в комментариях, но меня смутило то, что автор статьи как-то странно воспринимает критику CSS. Словно эта критика как-то оскорбляет верстальщиков. Но мне не понятно причем тут они, особенно учитывая тот факт, что у них и альтернативы-то нет. Возможно это обратная сторона того тесного общения с технологией, а которой я упомянул. Получается какое-то сочувствие к используемому инструменту.
                                    0
                                    Консорциум W3 состоит в основном из крупных компаний, в том числе и компаний выпускающих браузеры. Так что разработчики браузеров и стандартов это одни и те же люди. К слову, стандарты постоянно дополняются, появляется что-то новое. Но не забывайте про тот факт, что реализация той или иной фичи должна устраивать всех. Что является плюсом, т.к. появляется единый стандарт. И именно к этому шли столько лет. Я думаю все уже устали от того, что было ранее, от этой разрозненности.
                                  0
                                  Почему вместо «horizontal-align: center», я должен писать «margin: 0 auto»?

                                  Потому что нет особого смысла вводить еще одно свойство, достаточно понять логику. auto в данном случае означает автоматический расчет отступов по краям.

                                    +3
                                    *по горизонтали

                                    по вертикали, будь добр, придумать что-нибудь сам
                                      –1

                                      Ну, в этом отчасти согласен. Можно было бы сделать margin: auto 0. Но не всё так просто.

                                        +2

                                        Внутри flexbox действует во в обеих направлениях.

                                    +2
                                    Слабо вам взглянуть на те умопомрачительные штуки, что делает на CSS Ана Тюдор, и сказать мне в лицо, что это «ненастоящее программирование» и сделано на «тупом языке»?


                                    Такие кубики на паскале в школе делали в 90-х. И что, теперь именно это — настоящее программирование? На брэйнфаке при желании тоже можно кубик написать, сервером и CSS-фронтендом. И даже заставить работать в Canary или Firefox Night Build.

                                    А так обычно в гос. организациях каких-нибудь стоят хрюши с в лучшем случае IE9 и без этого кубика им конечно никуда… Ну и естественно про flex тоже можно не вспоминать. Иногда смотришь в caniuse и грустишь.

                                    Короче очень уж спорная аргументация в статье, возражения из плоскости «не делаешь кубики на CSS — не говори что он неудобен» и «не нравится не ешь».
                                      0

                                      А на что именно вы смотрите в caniuse и грустите?
                                      IE9 уже настолько непопулярный, что его там даже не показывают:


                                      https://habrastorage.org/files/d7f/f20/1cb/d7ff201cb351433f8e53247488c8ad9c.png


                                      Есть еще, правда, IE8, но там своя ретро-атмосфера, за которую нужно брать дополнительную оплату так-то.

                                        +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 для плавающих контейнеров? Вопрос риторический. Сами все понимаете.
                                          +2

                                          А вы в курсе, что пользователи WinXP ограничены только IE8, и поддерживать IE9 не имеет смысла?

                                            0
                                            То что IE9 поддерживать нет смысла я давно в курсе. А вот что WinXP (я почему-то по запарке думал девятка в нём последняя) только до восьмерки поддерживает, в этом я ошибся. Спасибо за инфу. Теперь еще плюс один аргумент против IE9 у меня есть. Пункт 2 можно вычеркнуть.

                                            И еще опечатка в п. 6. — CSS у фронтендеров большая (а не меньшая) головная боль, чем jQuery.
                                            0
                                            Вы сейчас просто весь мой мир сломали. Завтра же пойду пинать начальство отказываться от поддержки.
                                            0
                                            Если CSS так хорош, почему есть PostCSS, SASS/LESS/STYLUS, и ими пользуются и хвалят

                                            Есть машиночитаемый код, а есть исходники.
                                            CSS изначально был заточен для легкого разбора и интерпретации. Не вижу ничего плохого в использовании специальных иструментов для подготовки кода браузеру.

                                              +2
                                              Какой смысл молниеносно парсить CSS, если будет тормозить соединение, выкачивающее тонны этого избыточного кода? Очевидно, что отвратительный дизайн обязан чьей-то не самой удачной идее в начале и длительной поддержке с помощью нагромождения костылей.

                                              Веб-инструменты славились динамичностью, без необходимой компиляции. В мире программирования эта фаза нужна для оптимизации на семантическом уровне и только в вебе таким образом стараются абстрагироваться от стрёмного браузерного API (в широком смысле).
                                                0

                                                Избыточность решается алгоритмами сжатия.


                                                Основная идея в том, что css — это таблица, то есть данные, которые не нужно исполнять. Для динамики в браузере есть javascript, а css статический, без шансов словить бесконечный цикл или какую-нибудь ошибку компиляции.


                                                Если вам нужно что-то посложнее, миксины или переиспользование кода, надо брать препроцессор и тогда все эти ошибки исполнения вылезут при сборке, а не у пользователей в браузере.

                                                  0
                                                  > без шансов словить бесконечный цикл или какую-нибудь ошибку компиляции.
                                                  устаревшие сведения.

                                                  https://github.com/elitheeli/stupid-machines
                                                  http://lemire.me/blog/2011/03/08/breaking-news-htmlcss-is-turing-complete/

                                                    0

                                                    Открыл страницу в браузере, ни циклов, ни ошибок не увидел.
                                                    К чему вы привели эти ссылки?

                                                      0

                                                      https://jsfiddle.net/78yahLg8/


                                                      Вот вам ошибка. Пусть и глупая, но самая настоящая, мешающая прочитать текст. И отсутствие компиляции не помогло...

                                                        0

                                                        Еще как помогло!
                                                        У вас есть отдельная невалидная конструкция, но это никак не ломает остальные стили.


                                                        В то время как ошибка в Javascript или другом языке вызовет остановку и программа дальше исполняться не пойдет.

                                                          0
                                                          В то время как ошибка в Javascript или другом языке вызовет остановку и программа дальше исполняться не пойдет.

                                                          Это всегда контролируемое поведение, для этого существует механизм исключений.
                                                          +1
                                                          Имеется ввиду что в идеале вы не можете написать css который можно особо не проверять и он не положит браузер, а не то, что верстальщик не налажает.
                                                          0
                                                          Вы наверное, настоящий веб-разработчик, не имеете профильного образования и даже не представляете, чего теряете. Тьюринг-полнота это возможность построить и циклы вообще, и некорректные, в частности.
                                                            –1

                                                            Здравствуйте! Спасибо за замечание о моем образовании.


                                                            В указанной статье показывается, как построить вычислительную машину в браузере силами HTML+CSS. В этой ситуации они являются лишь составными частями, но не самим языком.


                                                            С таким же успехом можно называть Тьюринг-полными микросхемы и шестеренки, из которых строятся компьютеры. Но, согласитесь, что это немного не то.

                                                              –1
                                                              Есть большая разница. Микросхемы и шестерёнки в компьютер надо собирать руками, что требует значительного времени и ресурсов. А копирование компьютерных программ почти ничего не стоит, и значит реализацию цикла будет несложно воспроизводить. Дорога от возможности до реализации короче и воспроизводима.
                                                        +1
                                                        Избыточность решается алгоритмами сжатия.

                                                        То есть вместо того, чтобы сделать умный интерпретатор и не испытывать боли, мы будем делать умные (на уровне языковой семантики) компрессоры/декомпрессоры?
                                                    +1
                                                    Если CSS так хорош, почему есть PostCSS, SASS/LESS/STYLUS

                                                    Если C так хорош, почему есть C++, C#, Java, Objective-C.

                                                    Да потому что, это естественный процесс развития чего бы то не было. Есть языки, и есть люди которых они не устраивают, и они вкатывают свои реализации, под свои нужды.

                                                    Так, в принципе, все яп появились.
                                                      –1
                                                      Вы уверены, что отвечаете на тезис «не надо ругать CSS»? Вы пишете на C то же, что другие на C++/C#/Java/Objective-C?
                                                +11
                                                HTML — дерьмо.
                                                CSS — дерьмо.
                                                JavaScript — дерьмо.
                                                Node.js — дерьмо.
                                                jQuery — дерьмо.
                                                PHP — дерьмо.
                                                Смерть неизбежна.
                                                  +7
                                                  Тогда уж не смерть, а жизнь в дерьме.
                                                    +1
                                                    А потом смерть.
                                                      0
                                                      Мухи живут и довольны. А чем мы хуже?
                                                        +1

                                                        Дерьмо — понятие относительное. Кислород — это дерьмо растений. Мухи, очевидно, считают дерьмом только мушиное дерьмо. А дерьмо тетрапод для них — еда.

                                                        0
                                                        Полужизнь и смерть ©
                                                      • UFO just landed and posted this here
                                                          –1
                                                          Angular.js забыли
                                                            0
                                                            HTML то чем не угодил?
                                                            +1
                                                            CSS — просто супер-вещь!
                                                            Конечно немного нехватает наследования и прочих плюшек (для которых есть куча инструментов вроде less/sass) и не всегда предсказуемый синтаксис (например разместить блок без чётких размеров по центру экрана), но зато как легко можно изменить дизайн сайта подправив всего несколько строчек кода. Кто ругает CSS, тот просто не умеет им пользоваться…
                                                            Тут скорее нужно ругать разработчиков браузеров с их разной обработкой комманд и префиксами. Конечно может быть в будущем будет хорошая замена CSS, но я думаю это случится не раньше чем через 5-7 лет. Да и скорее просто CSS продолжит эволюционировать становясь всё удобнее. Например переход к 3 версии CSS был огромным шагом вперёд.
                                                              +2
                                                              > Конечно может быть в будущем будет хорошая замена CSS, но я думаю это случится не раньше чем через 5-7 лет.

                                                              Ага, только вот будет как обычно — было X стандартов, стало X + 1. И все их потребуется поддерживать.
                                                                –1
                                                                0
                                                                Можно на CSS сделать так, чтобы секунды на экране не пересчелкивались, а плавно прокручивались?
                                                                Что-то типа барабана с цифрами.
                                                                В JS я могу один раз вызвать прокрутку (задать атрибут, для которого в CSS прописаны padding-top и transition).
                                                                Вопрос, как ее взбодрить потом?

                                                                Спасибо.
                                                                +8

                                                                Дисклеймер: я не фронтенд-разработчик. Я халтурщик на все руки full-stack фрилансер. Я куда больше разбираюсь в backend (ASP.NET), но приходится и верстать. Я многого не знаю, и опыт мой в CSS скуден.
                                                                Все это говорю со своей позиции дилетанта.


                                                                Каждый раз, когда я что-то делаю, у меня обязательно возникает "WAT" от очередной нелогичности CSS (да-да, я сам сделал криво). Из последнего: я выравнивал inline-block элемент по вертикали, применил классический подход с table-cell, и он растянулся на всю высоту родителя. Я долго смотрел на это и думал, как же исправить, и как я делал раньше, если все работало.


                                                                Да, есть приемы, да, нужно все знать и иметь опыт, это я не отрицаю. Но некая "недерменированность" CSS, когда поведение элемента зачастую странным и не очевидным образом зависит от совершенно других — разрдажает. Да, я понимаю, что причина этому — особенности реализации, и поток элементов расположить совсем как угодно не так уж и легко.

                                                                  +5

                                                                  А вы ожидали, используя вещи не по назначению, что всё будет работать как вам надо? Что за "классический подход с table-cell"?

                                                                    –1

                                                                    6 методов вертикального центрирования с помощью CSS ., метод №2. Присутствует практически в каждой статье про вертикальное выравнивание.

                                                                      +6

                                                                      Не читайте статей пятилетней давности — ничего полезного вы оттуда уже не узнаете.

                                                                        0

                                                                        Первая попавшееся ссылка из гугла, таких много, вот свежее: habr


                                                                        Да, идеально flexbox, но он даже в IE11 поддерживается с ограничениями (на основе caniuse)

                                                                          +2

                                                                          Без ограничений, но с багами. Список багов там на отдельной вкладке.

                                                                    +2
                                                                    Из последнего: я выравнивал inline-block элемент по вертикали, применил классический подход с table-cell, и он растянулся на всю высоту родителя. Я долго смотрел на это и думал, как же исправить, и как я делал раньше, если все работало.

                                                                    Из последнего: я выравнивал пользовался грязным хаком, который я даже не понимаю, как работает и что-то пошло не так. Я долго смотрел на это и думал, как же исправить, и как я делал раньше, если все работало.
                                                                      +4

                                                                      Я предупредил, что я профан в этом деле.


                                                                      С помощью гугла я нашел несколько способов вертикального выравнивания, например, использовать line-height родителя, равный высоте или задание родителю display:table, потомку display:table-cell и vertical-align.


                                                                      И да, все способы вертикального выравнивания, что я видел — грязные хаки. 80% "как сделать XXX в CSS" — грязные хаки. Собственно это и есть моя главная претензия к CSS — все делается грязными хаками.


                                                                      А так, я буду очень рад узнать, как вертикально выравнивать блочные элементы без грязных хаков.

                                                                        0
                                                                        Собственно это и есть моя главная претензия к CSS — все делается грязными хаками.
                                                                        Это, к сожалению, так.
                                                                        Частично из-за того, что стили, придуманные для гибкого веба, пытаются применять к макетам, нарисованным для неизменяемой полиграфии.
                                                                        Частично из-за того, что не все потребности веб-дизайнеров были предусмотрены авторами спецификаций.
                                                                            +1
                                                                            Кроссбраузерность флексбокса делает меня страдать.
                                                                              +1

                                                                              Вы из тех бедолаг, которых заставляют поддерживать ие9 в 2016 году?

                                                                                0
                                                                                Поверьте, мы еще есть…
                                                                                  +2

                                                                                  Вроде в соседней ветке вас убедили больше его не поддерживать, разве нет?

                                                                                    0
                                                                                    Я то давно в этом убежден. Увы, есть бизнес.
                                                                                      0

                                                                                      Работодатель — не рабовладелец, его можно сменить. ;-)

                                                                                        0
                                                                                        Ну уж не так радикально же =) Да да, я понимаю, либо так, либо IE.
                                                                                        +2
                                                                                        Увы, есть бизнес

                                                                                        Да, и он умеет считать деньги. И, как правило, счёт не в пользу устаревшей технологии:
                                                                                        Мой разговор с человеком из бизнеса (крупный интернет-магазин):
                                                                                        — (я) Судя по статистике, у вас около 5% пользователей на ie8, но поддержка этого браузера отсутствует, почему?
                                                                                        — У нас была поддержка, но мы её закрыли, т.к. на поддержку этого устаревшего браузера уходит больше денег, чем приносят пользователи, которые им пользуются.

                                                                                        Дальше он показал мне точные цифры, по которым было видно, что разница стоимость поддержки / прибыль была около порядка!
                                                                                          0
                                                                                          Полностью согласен, но мне попался редкий частный случай, когда бизнес понимает расходы, но когда есть группа клиентов, сидящих на IE9, которых не поддерживать ну никак нельзя.
                                                                                            0

                                                                                            Как я Вас понимаю. У нас — как раз наиболее жирные клиенты сидят на ворованной ХР. (И, вероятно, до скончания веков на ней сидеть будут).

                                                                                    0
                                                                                    Этот славный ИЕ9… Мой работодатель передал слова дизайнера в ответ на вопрос «Какие версии ИЕ поддерживаем»:
                                                                                    Там вроде нет спецэффектов что бы в ie6 не отображалось что то.

                                                                                    Я конечно высказал своё мнение на счёт ие6 и того дизайнера, и продолжил делать так, чтобы в ие8-9 была изящная деградация (минус скругления и тенюшки), но осадочек остался.
                                                                                    0
                                                                                    Кроссбраузерность флексбокса лучше кроссбраузерности бордер-радиуса.

                                                                                    Для России и др. постсоветских стран CanIUse выдает заниженные проценты, т.к. не учитывает Я-браузер и других локальных «хромят». Если приплюсовать их суммарную долю, цифры сравняются с общемировыми.
                                                                                      +2

                                                                                      Вы Show all забыли нажать.
                                                                                      Да даже если бы у них была одинаковая кроссбраузерность — это всё равно бы не позволило использовать флексбокс в продакшене ещё года два, потому что флексбоксом делается раскладка страницы, и без него она просто развалится в хлам, а бордер-радиус — это просто симпатичная свистелка, от отсутствия которой внешний вид становится чуть хуже.

                                                                                        0
                                                                                        Show all не меняет картину качественно (особенно если в придачу нажать еще и Usage relative). Некоторые браузеры CanIUse, увы, не учитывает в принципе (см. внизу).

                                                                                        В простейшем случае без флексбоксов раскладка не «развалится в хлам», а изящно деградирует до минималистичной одноколоночной версии а-ля мобильная. Которая зато молниеносно грузится и мгновенно реагирует на действия юзера, что куда более критично для того ископаемого железа, на котором доживают свой век бесфлексовые IE и андроид-браузеры 4.3-.

                                                                                        В наш адаптивно-отзывчиво-мобайлфёстный век гламурные раскладочные навороты — именно что симпатичная свистелка, и ее вполне можно добавлять как постепенное улучшение!
                                                                                          0

                                                                                          Я вам, наверное, открою секрет, но вёрстка с помощью позиционирования и маржинов точно так же молниеносно загрузится, но не развалится при этом вообще нигде. Про какие раскладочные развороты вы говорите, я не знаю.

                                                                              +1
                                                                              Буду сильно утрировать…
                                                                              Так то я гуманитарий, но иногда балуюсь математикой. И каждый раз, когда я что-то делаю, у меня обязательно возникает «WAT». Вот из последнего, попытался найти квадратный корень из бесконечности поделенной на ноль, и вселенная перезагрузилась… Говно, эта ваша, математика.


                                                                              Если вам не хватает опыта, и вы не понимаете, как что устроено внутри языка, не значит что язык плохой. Это значит лишь, что вам не хватает опыта и вы не понимаете как что устроено внутри языка.
                                                                                +2
                                                                                В свое время, когда я в школе только начинал программировать, то пробовал и паскаль, и html, и css, но в случае с html+css постоянно чувствовал себя какой-то обезьяной, которая не понимает, что делает, потому что если ваша программа на паскале некорректна — она не скомпилируется. И там даже будет текст ошибки! А если она упадет в рантайме, то вы тоже получите сообщение об ошибке, и если из этих сообщений вам всё еще непонятно, что происходит, то можно добавить отладочный вывод в консоль, можно поставить брекпоинт и т.д. Вы понимаете, к чему я клоню?
                                                                                Если ваш элемент на странице отрисовался не так, как вы планировали, то вы можете только догадываться, почему же это так. Потом вы, конечно начнете читать доку, анализировать её и заниматься прочими полезными вещами, но вы так и будете сами работать дебаггером.
                                                                                Надо ли говорить, что после того, как я больше часа потратил на выравнивание содержимого ячейки таблицы, у меня даже мысли не было заниматься вебом. Я еще со школы помню то чувство, когда ты даже не знаешь, куда начинать копать.
                                                                                  –1
                                                                                  ctrl+shift+I?
                                                                                    +2
                                                                                    Во-первых, во времена моей школы я о таком не знал, и я даже не уверен, что это было.
                                                                                    Во-вторых — это не совсем ответ. Инспектор показывает вам результат, но вы не всегда можете понять, почему он такой. Вы добавляете какой-нибудь align-center (не помню, как оно точно называется), а у вас ничего не происходит, и вы не знаете почему.
                                                                                      0
                                                                                      Если вы не знаете что именно делает тот или иной элемент API, то чему вы удевляетесь? Если я за 2-3 минуты не понял почему оно не работает, я открываю спек. И не только css, с любой вещью так. Просто вам почему-то кажется что веб должен быть простым и веселым и потратить 4 часа на решения какой нибудь мелочи можно только в «настоящем» яп.
                                                                                        +2
                                                                                        в том-то и дело, что на бекенде на решение мелочи я потрачу 10 минут. Если не пойму, то открою дебаггер и посмотрю, что происходит. А на фронте я должен кучу вещей именно знать, потому что там нюансы и костыли на каждом углу
                                                                                          0
                                                                                          Скажите, спасибо, что вы не рисуете те самые сайты. У дизайнеров ни спеков, ни доков, ни дебаггеров отродясь не было. Да и есть куча других сфер, где нужно просто знать. И коли вам не по душе такой расклад, ну не лезьте туда. Делов то.

                                                                                          А если у дизайнера выходит круглый квадрат, то решается это проблема заменой дизайнера.
                                                                                            0
                                                                                            Да и есть куча других сфер, где нужно просто знать. И коли вам не по душе такой расклад, ну не лезьте туда. Делов то.

                                                                                            Так себе аргумент.
                                                                                              0
                                                                                              «Мыши плакали, кололись, но продолжали грызть кактус»
                                                                                                0
                                                                                                «Проще закрасить, чем отодрать».
                                                                                  +2
                                                                                  Доля ИЕ9+10 в России в совокупности составляет в среднем 0.5%. Перестаньте уже выдумывать, что в каких-то абстрактных непонятных случаях вас просят во что-бы то ни стало сделать вертикальное выравнивание для этих браузеров. И начните пользоваться flexbox-ом.
                                                                                    0

                                                                                    Признаю, я был не прав. Как я и сказал — я нуб. Ну благодаря комментариям здесь, узнал много нового. Спасибо!

                                                                                      0

                                                                                      Корпоративный, мать его, клиент. Основной, между прочим, источник дохода.
                                                                                      А добиться одинакового вида во всех современных браузерах, я считаю — норма.

                                                                                        0
                                                                                        одинакового вида во всех современных браузерах

                                                                                        1) выделенное слово — не ключевое?
                                                                                        2) в Safari на айфоне и Самсунг-браузере на «умном телевизоре» тоже вид должен быть одинаковым?
                                                                                          0
                                                                                          1. Да, ключевое. В старых браузерах просто должно как-нибудь работать.
                                                                                          2. Прошу прощения, не могу ответить. Я занимаюсь не сайтами, которые смотрят на любых устройствах, а приложениями для дистанционного обучения, рассчитанными если не на десктоп, то по крайней мере на планшет с крупным экраном. Опыта вёрстки под телефоны и телевизоры не имею. Вероятно, я сделаю отдельные версии для названных устройств, если получу команду поддерживать и их тоже.
                                                                                    +2
                                                                                    ИМХО CSS отличная задумка, нормальная реализация,

                                                                                    Если бы они оставили CSS просто как дополнительный способ назначения параметров, было бы ок, но они покусились на полную отмену HTML.

                                                                                    Реализовали они это убого через псевдо классы (например first-of-type).

                                                                                    C чего-то разработчики CSS решили, что могут простым переназначением параметров убрать все тэги оставив абстрактные box и inline+ css настройки, и это почти получилось, пока они не уперлись в table, list и т.п.
                                                                                    И их реализация Table tr td через CSS просто отстой.

                                                                                    А поддерживать (рендер машине) надо.

                                                                                    Короче, жадность фраера сгубила.
                                                                                    В прочем этим страдают многие, например авторы Imap -отличный формат, но зачем его сделали ХУМАН_РИДИБЛ ???? Куча гемора и лишних данных, а нужных наоборот не вставить.
                                                                                      +3
                                                                                      они покусились на полную отмену HTML

                                                                                      Вы точно не путаете семантическую структуру (HTML) документа с его отображением (CSS) на экране?
                                                                                        0
                                                                                        Я к тому, что разработчики CSS в плотную подошли к полной отмене за ненадобностью всех тегов форматирования, оставив два основных: div для бокс элементов и span для inline, заменив установку дефаулт параметров через CSS стили.

                                                                                        Но обломились на комплексных типа tabel и list, у которых по мимо параметров есть поведение. А попытки CSS разработчиков преодолеть эту проблему привели к нагромождениям и уродcтву в довольно стройной (до этого) идеологии.

                                                                                        Причем тут синтаксис HTML и рендер ДОМ объектов не понял.
                                                                                          +1
                                                                                          Я к тому, что разработчики CSS в плотную подошли к полной отмене за ненадобностью всех тегов форматирования
                                                                                          Разработчики CSS не подходили и не собирались подходить к такому.
                                                                                          Они просто дали авторам очень гибкий инструмент и некоторые из авторов начали забивать микроскопами гвозди, попутно жалуясь, что ручка не очень удобная.

                                                                                            0
                                                                                            >Разработчики CSS не подходили и не собирались подходить к такому.

                                                                                            Вряд ли вы анализировали CSS на столько, что бы утверждать подобное.
                                                                                            Впрочем это легко узнать: какие есть тэги форматирования которые нельзя сэмулировать используя DIV, SPAN и CSS?
                                                                                              0
                                                                                              Ячейки таблиц с colspan/rowspan, навскидку. Отчасти fieldset (пока еще). Самое элементарное — br с атрибутом clear (CSS-свойство clear работает только для блоков, а br формально текстовый). Ну и, раз уж речь о тегах форматирования — куда же без легендарного center? :)
                                                                                                0

                                                                                                Рукалицо.
                                                                                                HTML — это стандарт семантической разметки документа с помощью тегов.
                                                                                                Расскажите, пожалуйста, как вы собрались семантику эмулировать с помощью CSS, эмулятор вы наш. Очень интересно послушать.

                                                                                                  0
                                                                                                  Т.е. вы не знаете, как используя только div и span сделать любое форматирование? Яж об этом и говорил: ваши знания скорее всего из другой области, а значит и понимания не возможно.
                                                                                                    0

                                                                                                    Я вам про Фому, а вы мне про Ерёму.
                                                                                                    Ознакомьтесь с матчастью по ссылке выше.

                                                                                                      +1
                                                                                                      Для вас веб-страница — это только текст и форматирование его на экране?
                                                                                                        –1
                                                                                                        Для моей задачи да, HTML страница это ДОМ объекты (боксы и текст) форматированные на экране. Плюс переходы и всякие мелочи.
                                                                                                          +1
                                                                                                          Если речь идёт о страничке, которую никто, кроме вас не увидит — пользуйтесь тем, что удобно лично вам.
                                                                                                            –1
                                                                                                            Не понял, что еще собой представляет HTML как не форматированные боксы и инлайны?

                                                                                                            И я не создаю страницы я их отображаю.
                                                                                                            Отсюда и отношение к CSS
                                                                                                            Плюсы CSS он строгий и легко парсится, в отличии от HTML.
                                                                                                            Минусы, заставляет редактировать уже созданные объекты или дожидаться полной загрузки блоков, с HTML такого нет — кусок загрузился, создал для него объекты, отобразил.
                                                                                                              +1
                                                                                                              HTML представляет собой структуру данных, на основании которой можно построить визуальную структуру боксов (инлайновых, блочных, плавающих, табличных, флексовых, гридовых, черто-в-ступочных и т.д.). Причем строится она по правилам CSS.

                                                                                                              А можно построить по этим же данным еще что-нибудь. Не обязательно визуальное.
                                                                                                                0
                                                                                                                Дерево объектов с параметрами причем объектов двух типов box & inline.

                                                                                                                Float это параметр для box объекта
                                                                                                                Table это совокупность box объектов. И т.д.

                                                                                                                Visible = false это тоже параметр объекта.
                                                                                                                  0
                                                                                                                  Визуальный объект всё-таки box. А уже box бывает разных типов — block, inline и еще куча более редких. Голый текст «два» между абзацами в конструкции
                                                                                                                  <p>раз</p> два <p>три</p>
                                                                                                                  
                                                                                                                  в визуальной структуре — box типа inline (обернутый в анонимный box типа block), а в HTML — вообще даже не элемент, а лишь текстовая нода.

                                                                                                                  У элемента есть параметр, создавать ли box или нет. А если создавать — то какого типа.
                                                                                                                    0
                                                                                                                    Сложно не согласится.
                                                                                                                    Но с уточнением, Inline элементы (текст, img, inlinebox, input и т.д.) это всеже самостоятельный визуальный объект с совсем другим поведением и параметрами, нежели объект box.
                                                                                                                      0
                                                                                                                      Если речь о геометрических параметрах (ширина/высота, внешние/внутренние отступы и т.п.), то у inline box'ов они те же, что у любых других. Другие у них алгоритмы, по которым эти параметры рассчитываются и применяются. Да, поведение. Но box'ами они от этого быть не перестают:)
                                                                                            +1
                                                                                            А что не так с first-of-type и прочими псевдоклассами? Как связаны псевдоклассы и параметры html? Или вы пользуетесь nth-of-type вместо идентификаторов или хотя бы инлайн-стилей?
                                                                                              –1
                                                                                              Они нарушают HTML принцип: считал, создал, отформатировал.
                                                                                              Появляется зависимость от еще не считанных и не обработанных тегов, т.е. последующие влияют на предыдущие.

                                                                                              Также некоторые псевдо классы используемые в теге заставляют создавать несколько объектов, причем иногда перед уже созданными.
                                                                                                0
                                                                                                поясните примерами, что ли
                                                                                                  0
                                                                                                  Ну например last, заставляет дождаться окончания считывания блока тэгов с выходом на родителя что бы появилась возможность прогнать через стили и назначит параметры, а учитывая что параметры могут сильно влияют на форматирование, невозможно сделать нормальное отображение блока пока он полностью не загружен.

                                                                                                  В чистом HTML (или без псевдоклассов) такого почти нет, т.е. сколько считал столько показал.

                                                                                                  И еще больший тупизм — before
                                                                                                  Т.е. мало того что я не могу нормально показать считанные данные, так еще иногда приходится вставлять ПЕРЕД уже созданными объектами новый объект.

                                                                                                  и т.д.
                                                                                                    +2

                                                                                                    Не ПЕРЕД, а ВНУТРИ.

                                                                                                      –1
                                                                                                      Шаблонно мыслите.
                                                                                                      У объекта с параметром before в 99% будут внутренние объекты, для которых объект созданный по параметру content будет ПЕРЕД ними.
                                                                                                        0

                                                                                                        Они будут созданы уже после.

                                                                                                          0
                                                                                                          Т.е вы считаете, что еще до закрытия тэга можно узнать какие CSS стили ему подходят?

                                                                                                          На чем основывается ваша уверенность. Есть опыт, построения DOM?

                                                                                                          • UFO just landed and posted this here
                                                                                                              0
                                                                                                              «На основе DOM и CSSOM строится дерево отображения,»
                                                                                                              «DOM тут не причём».
                                                                                                              Не находите что-то странное в этих утверждениях?

                                                                                                              Впрочем это не важно, повторяю
                                                                                                              1 во время считывания и обработки тэгов, невозможно гарантированно прогнать Тэг по CSS стилям, пока не будет закрыт тэг родителя. (из-за last-child)
                                                                                                              2 из-за п1 и after нужно или дожидаться полного считывания HTML прежде чем строить объекты, или превращать HTML viewer в HTML editor, что бы появилась возможность делать inser в уже готовые и отображенные объекты.

                                                                                                              а это нарушает потоковый принцип ХТМЛ и т.д. выводы читай выше.
                                                                                                              • UFO just landed and posted this here
                                                                                                                  0
                                                                                                                  1 А зачем создавать объекты «позже»?
                                                                                                                  Юзерам важно отобразить как можно быстрее.
                                                                                                                  Считал, распарсил, создал объекты, отобразил.

                                                                                                                  2 пересчет стилей = удаление/изменение старых объектов.
                                                                                                                  А все из-за убогости пары никому не нужных параметров CSS, о чем я и говорил.
                                                                                                                    0

                                                                                                                    Вы так пишите, как будто css — единственное препятствие на пути отображения по мере загрузки!


                                                                                                                    А таблицы? Картинки? Что насчет картинки в плавающем блоке?

                                                                                                                      0
                                                                                                                      Как бы тема о CSS и я написал что мне нравится и что мешает в этом отличном по началу языке.

                                                                                                                      Кроме того картинки, дозагрузка таблиц и floatbox, не влияет но основные меняет параметры объектов, а в основном на форматирование строк.
                                                                                                                      0
                                                                                                                      Если эти параметры не нужны ВАМ, не значит, что не нужны НИКОМУ.
                                                                                                                        0
                                                                                                                        Кто бы спорил, но только не я, а учитывая, что моя задача не делать CSS, а выводить, я такие извращенные HTML насмотрелся…
                                                                                                                        Так что полностью с вами согласен, все, все что только можно изгадить или извратить, все будет использовано.

                                                                                                                        ps
                                                                                                                        подскажите какая есть задача, где вы, вынужденны использовать эти параметры?
                                                                                                                          0
                                                                                                                          Классический пример: делаем меню горизонтальной строчкой, между пунктами меню — разделители.

                                                                                                                          .menu li{display:inline; white-space:nowrap;}
                                                                                                                          .menu li::before{content:" | ";}
                                                                                                                          .menu li:first-of-type::before{content:"";}
                                                                                                                            +1
                                                                                                                            При таком раскладе, кажется, как раз ничего пересчитываться не должно? Первый ли li в списке или нет (в отличие от того, последний ли он там), известно сразу, как только до него дошел парсер?
                                                                                                                              0
                                                                                                                              Ужас. :)
                                                                                                                              Но это еще не худший вариант (для рендер машины), а живой пример с last-of-type есть?
                                                                                                                  +2
                                                                                                                  ::before и ::after не требуют информации о контенте элемента. Они требуют лишь его наличия (ну и допустимости их для этого элемента — напр. для пустых и замещаемых элементами они по одним спекам запрещены, по другим — не определены). Так что браузеру ничто не мешает сразу при создании бокса для элемента создать и боксы для его ::before и ::after — а потом, по мере построения боксов для его дочерних элементов, добавлять их между ними.

                                                                                                                  Вот :empty, :last-child и :nth-last-*, действительно, должны либо дождаться закрытия элемента, либо перестраиваться «на лету» при добавлении каждого потомка. Поэтому они и медленные.
                                                                                                                    0
                                                                                                                    «Пришел лесник и всех выгнал.»©

                                                                                                                    Вы привели хороший разбор проблематики CSS, которую сколько я не объяснял, некоторые так и не захотели понять.
                                                                                                  0
                                                                                                  La vie, voyez-vous, ça n’est jamais si bon ni si mauvais qu’on croit. — Guy de Maupassant
                                                                                                  А css — это жизнь
                                                                                                    +1
                                                                                                    На самом деле, брак Анны Болейн был признан недействительным. Так что она никак не может быть Тюдор.
                                                                                                      0
                                                                                                      Вот скажите, зачем вообще сделали HTML + CSS тьюринг-полным? Пока, создаётся такое впечатление, что действительно хотели наговнять
                                                                                                        +7
                                                                                                        То что язык CSS кривоват — это медицинский факт.
                                                                                                        Последние годы ситуация в этой области, конечно же, заметно улучшилась и нам стало казаться, что CSS стал мощный, гибкий и в умелых руках способен творить чудеса. Отчасти это так, но лишь на фоне того, что было 5-10 лет назад. Если посмотреть непредвзято, то можно заметить и несуразности, и костыли, и проблемы с поддержкой. Даже нынешний любимец публики — Flexbox — и тот вызывает вопросы.
                                                                                                        А все те «умопомрачительные» демо, которые можно найти где-нибудь на codepen, обычно невероятно замудрены и костыльны. Это просто прикольные упражнения для мозгов. В реально работе 90% того кода неприменимо.
                                                                                                          +6
                                                                                                          Демо Анны выглядят интересно, но за внешней простотой скрываются:
                                                                                                          — циклы, «спрятанные» в Haml и SCSS (на самом деле делается 6 раз по 256 дивов-тайтлов)
                                                                                                          — малопонятные значения вида (что это значит и зачем оно я лично сразу понять не могу и как это можно поддерживать остается загадкой)
                                                                                                          						$p: 50%/($n - 1)*
                                                                                                          							($j + abs((1 - $mod)*($n - 1) - $k));
                                                                                                          						@if $mod > 0 { $p: 100% - $p; }
                                                                                                          

                                                                                                            +3
                                                                                                            Какой-то пост странный, сплошные эмоции, какой-то разговорный сленг — это всё больше уместно для личной днявочки по-моему.
                                                                                                              +1

                                                                                                              Так и есть. Этот пост – перевод из личного блога Кристиана Хейлмэна.

                                                                                                                0
                                                                                                                А, извините, тогда всё в порядке.
                                                                                                              +1
                                                                                                              вы совершенно не виноваты, что и стандарт и реализации вам достались (пока что) проблемные сильно. ругают и стебутся не над профи, пытающимися достичь свободы самовыражения на сss, а над всем тем, что мешает этому.
                                                                                                                0
                                                                                                                А как вообще получилось, что родилась связка html+css? Ведь ко времени зарождения Web'а уже существовала такая отличная штука, как TeX, где всё тоже human-readable и где контент отделён от форматирования. И были уже готовые движки для рендеринга этой штуки.
                                                                                                                Ну ведь логично было бы не изобретать костыли на коленке, которые вполне закономерно получились кривыми, а использовать уже отлаженное и проверенное временем решение.
                                                                                                                  0

                                                                                                                  А как в ТеХ описываются стили?

                                                                                                                    +1

                                                                                                                    У TeX порог входа повыше, да и он во многом заточен именно под вёрстку книг, а не одной большой страницы неопределенных габаритов.

                                                                                                                      +2
                                                                                                                      Там была долгая история… Основной упор был на быстроту передачи смысловой части по хилым каналам и адаптацию отображения для конкретного пользователя/ситуации (да, HTML с самого начала был адаптивным:). Но многое решил и слепой случай, как обычно.
                                                                                                                        0

                                                                                                                        Либо я вас неправильно понял, либо он был с самого начала резиновым, а не адаптивным.

                                                                                                                          0
                                                                                                                          Придерживаюсь глубокого убеждения, что резина — простейший частный случай адаптивности. Но адаптивность HTML никогда ей не исчерпывалась (см. те же консольные браузеры, телетайпы и т.п.).
                                                                                                                      0
                                                                                                                      Хочу такую кружку)
                                                                                                                        +4
                                                                                                                        Интерфейсы, которые я в 10-м классе делал в дельфи за час мышкой, сейчас целыми командами делают неделями. Покажите мне готовый грид-компонент, хотя бы близкий по скорости и фичам к аналогам хотя бы того что 20 лет назад было в delphi.

                                                                                                                        Верстка текста в вебе — как была говном, так и осталась. Где переносы уже, где выключка по ширине? А ведь текст в браузерах читают уже сильно больше чем в книгах и газетах. Оно даже долбаный текст не научилось рисовать.

                                                                                                                        Веб настолько плох, что у любого хабра и жежешки, уже есть мобильная аппа, удобнее браузера.

                                                                                                                        Веб должен умереть. И можете мне не петь про обратную совместимость: выкинуть веб в мире где люди ходят в фейсбук и почту через мобильные аппы — вообще не проблема.
                                                                                                                          +3

                                                                                                                          Простите, оффтоп, но выскажусь про мобильные приложение. Это исключительно мое личное мнение.


                                                                                                                          Когда какое-то приложение не предоставляет каких-то особых функций\оффлайна\производительности по сравнению с мобильной версией сайта — оно должно умереть.


                                                                                                                          Там нельзя:


                                                                                                                          • выделять текст
                                                                                                                          • делать поиск
                                                                                                                          • открывать вкладки
                                                                                                                          • добавить какую-то конкретную страницу в закладки
                                                                                                                          • переслать кому-то ссылку

                                                                                                                          На эту тему есть комикс XKCD


                                                                                                                          Заголовок спойлера

                                                                                                                          image

                                                                                                                          • UFO just landed and posted this here
                                                                                                                              0

                                                                                                                              Так возможность расшаривания должна быть предусмотрена разработчиком, если я все правильно понял. А в браузере всегда можно скопировать адрес.


                                                                                                                              Я никому не навязываю эту точку зрения, но на 100% согласен с этим

                                                                                                                              • UFO just landed and posted this here
                                                                                                                                  0

                                                                                                                                  В случае SPA от адреса в браузере толку мало, если разработчик не предусмотрел его смену при навигации внутри приложения.

                                                                                                                                    0
                                                                                                                                    если разработчик не предусмотрел

                                                                                                                                    Если разработчик не предусмотрел, то можно много на что жаловаться, но виноват в этом разработчик, а не технология.
                                                                                                                                      0

                                                                                                                                      Вроде как в большинстве фреймворков для SPA есть роутинг в том или ином виде (Angular, react-router, ...). Если роутинга нет вообще — это как-то очень печально. Я не припомню, чтобы встречал подобное. Это скорее исключение, чем правило.

                                                                                                                                +1
                                                                                                                                Покажите мне готовый грид-компонент, хотя бы близкий по скорости и фичам к аналогам хотя бы того что 20 лет назад было в delphi.

                                                                                                                                Покажите, для начала, что там было в Дельфи.


                                                                                                                                Где переносы уже, где выключка по ширине? А ведь текст в браузерах читают уже сильно больше чем в книгах и газетах.

                                                                                                                                Вы, видимо, проспали то время, когда в вебе было модно делать текст с выключкой по ширине и с переносами. Сейчас уже так не делают. Подумайте почему.

                                                                                                                                  0
                                                                                                                                  Переносы уже везде, только хромята ещё хромают, но и там буквально на днях пофиксили. Не везде (как говорят, сам пока глубоко не исследовал) словари этих переносов для русского языка (и др. языков кроме англ.). Но есть большое подозрение, что с правильным атрибутом lang и словари будут находиться чаще…
                                                                                                                                  +1
                                                                                                                                  > Интерфейсы, которые я в 10-м классе делал в дельфи за час мышкой, сейчас целыми командами делают неделями.

                                                                                                                                  Сейчас, кстати, и нативные десктопные приложения не брезгуют css для задания собственных стилей.
                                                                                                                                    +1
                                                                                                                                    Эти интерфейсы, в большинстве своём, были для фиксированного размера окна и элементов в нём. Некоторые заморачивались и через костыли делали растягивающиеся окна. Но в любом случае, размер элементов всегда остаётся одним и тем же. А вот с сайтами можно делать всё что угодно: увеличивать, уменьшать размеры элементов, просматривать на экранах с портретной и ланшафтной ориентацией экрана и даже адаптироваться под маленькие экраны!
                                                                                                                                      –1

                                                                                                                                      Анкер на две противоположные стороны — и элемент растягивается вместе с окном!


                                                                                                                                      Жаль только что в каждой линии такой элемент можно только один делать.

                                                                                                                                      +1
                                                                                                                                      Где переносы уже

                                                                                                                                      Переносы отлично работают, если их расставить в тексте заранее с помощью &shy;. А если вы хотите авторасстановку переносов браузером для каждого известного науке языка, то у меня для вас плохие новости — эта задача ещё не решена.
                                                                                                                                      Вам надо подключать огромное количество словарей и всё равно оно будет работать хуже, чем проверка грамматики.

                                                                                                                                      0
                                                                                                                                      Анимация классная.
                                                                                                                                      • UFO just landed and posted this here
                                                                                                                                          0
                                                                                                                                          Мой первый опыт общения с CSS был именно как на картинке. Но тогда я еще даже учебник не прочитал, только справочник немного, а так, делал по аналогии — открывал какой-нибудь сайт в режиме просмотра кода и грязно заимствовал: )
                                                                                                                                        +1
                                                                                                                                        Проблема не в CSS или других веб-стандартах, а в том, что при разработке спецификаций почти не учитывается обратная связь от практикующих веб-разработчиков и даже простая и полезная функциональность, для стандартизации и реализации которой требовались бы минимальные усилия, игнорируется годами.

                                                                                                                                        Например, спустя 10 лет (!) у нас всё ещё нет возможности переопределить отдельный фоновый слой без необходимости повторять все остальные слои. Не говоря уж о генерации виртуальных контейнеров средствами CSS.
                                                                                                                                          0
                                                                                                                                          у нас всё ещё нет возможности переопределить отдельный фоновый слой без необходимости повторять все остальные слои.
                                                                                                                                          Если мы о правилах слоя, но не о слое, то — есть, но никто этим не пользуется, т.к. не принято — надо обратиться к правилу document.styleSheets[i].rules[j] и поменять там selectorText или style. Изменится правило для любого слоя. Но, как видно, подход неудобен, потому что принято, что правила статичны. Нет именованных списков и есть хаотично создающиеся таблицы правил styleSheets, за количеством которых никто не следит по причине их условной «статичности» — как бы ни определил, результат будет тот же.

                                                                                                                                          А если мы о слое, в который вложены другие — то же самое, неудобной манипуляцией с нодами можем сделать что угодно — подменить, удалить, дочерние ноды рассовать по другим местам, без необходимости переписывания. Но принято переписывать.

                                                                                                                                          Вот с контейнерами (если вы о компонентах) — действительно, у CSS проблемы.
                                                                                                                                            0
                                                                                                                                            Я о множественных фонах в CSS и виртуальных контейнерах, генерируемых средствами CSS.
                                                                                                                                              0
                                                                                                                                              Ага, это просто дико. Та же ерунда с box-shadow, transition и т.п…
                                                                                                                                              +3
                                                                                                                                              MTonly наверное имеет ввиду, что нельзя изменить только средний слой в правиле типа
                                                                                                                                              html{
                                                                                                                                              	background-image: url("semitransparent.png"), url("semitransparent2.png"), url("semitransparent3.png");
                                                                                                                                              }
                                                                                                                                              

                                                                                                                                              Придется повторять правило полностью.
                                                                                                                                                0
                                                                                                                                                Именно.
                                                                                                                                              –1
                                                                                                                                              Как часто вы используете множественные фоны? Я думаю это свойство не дорабатывают именно из-за того, что частота использования множественного фона стремится к нулю.
                                                                                                                                              По генерации виртуальных контейнеров. CSS стилизует элементы. Именно в этом его предназначение. Оставьте динамический контент для других стезей.
                                                                                                                                              • UFO just landed and posted this here
                                                                                                                                                  +2
                                                                                                                                                  А как же паттерны из градиентов и подобные красоты?
                                                                                                                                                  +1
                                                                                                                                                  думаю это свойство не дорабатывают именно из-за того, что частота использования множественного фона стремится к нулю.
                                                                                                                                                  Когда требуется — тогда использую, и очень рад, что для этого нет необходимости засорять HTML-разметку дополнительными вложенными элементами. А не дорабатывают в общем случае потому, что заняты «более важными или трудоёмкими» (но не обязательно востребованными в веб-разработке) вещами. Конкретно для переопределения фонового слоя обсуждался вариант синтаксиса с указанием слоя с помощью индекса: background[0], но для этого потребовалось бы менять базовый синтаксис CSS (core syntax), а этого там боятся как огня, даже если на самом деле в конкретном случае это совершенно безопасно с точки зрения обратной совместимости.

                                                                                                                                                  CSS стилизует элементы. Именно в этом его предназначение.
                                                                                                                                                  А виртуальные контейнеры, по-вашему, для чего нужны? Именно для применения стилей к визуальным группам элементов без необходимости засорять HTML-разметку лишёнными семантического смысла элементами DIV/SPAN, нужными только для применения стилей.
                                                                                                                                                +1
                                                                                                                                                Мои претензии к CSS:
                                                                                                                                                1. Плохо читабелен, прочитав CSS код нельзя понять, как будет выглядеть конечная картинка. Когда CSS много, то по читабельности он может соревноваться с ассемблером, конкретно, что вот эта строчка делает понимаю, а что будет когда все вместе, нужно смотреть на результат в броузере с открытым инспектором.
                                                                                                                                                2. Следствие пункта номер 1, тяжело поддерживать. Часто переделать все с нуля, в разы быстрее, чем что то подправить в существующем коде. Если у вас не получается победить грабли, любовно расставленные предыдущим верстальщиком, попробуйте этот метод.
                                                                                                                                                  +1
                                                                                                                                                  Сложность CSS отчасти продиктована сложностью того, чем ей приходится управлять — текста. Который к тому же отображается в не самых предсказуемых условиях. Ты не знаешь ширину и разрешения экрана у пользователя, не можешь быть уверен в поддержке тех или иных опций браузера, да даже содержание текста. И всё это должно определённым образом двигаться, реагировать на действия пользователя.
                                                                                                                                                    0
                                                                                                                                                    Плохо читабелен, прочитав CSS код нельзя понять, как будет выглядеть конечная картинка.
                                                                                                                                                    Можете привести пример такого CSS-кода?
                                                                                                                                                      0
                                                                                                                                                      Можно я, сыграю разок за противника? ;)
                                                                                                                                                      button {
                                                                                                                                                        transition: background 0s 99999s
                                                                                                                                                      }
                                                                                                                                                      
                                                                                                                                                      button:active {
                                                                                                                                                        background: red;
                                                                                                                                                        transition: none;
                                                                                                                                                      }
                                                                                                                                                      

                                                                                                                                                      <button onclick="this.style='background: green !important'">
                                                                                                                                                        Нажми меня
                                                                                                                                                      </button>
                                                                                                                                                      

                                                                                                                                                      Какого цвета будет кнопка после первого нажатия? :)

                                                                                                                                                      Но лично я вот во многом как раз за такие вещи CSS и люблю:)
                                                                                                                                                        0
                                                                                                                                                        Какого цвета будет кнопка после первого нажатия? :)
                                                                                                                                                        А что говорит практика? ;-)

                                                                                                                                                        Лучше расскажите, почему снова инкрементировали индекс в нике. Или всё это — разные люди? ;-)
                                                                                                                                                          0
                                                                                                                                                          Моя практика согласуется с моим пониманием стандарта — после первого нажатия красный, после второго и последующих зеленый :-)

                                                                                                                                                          Это была невеселая история… Но стараюсь смотреть в будущее, а не назад :-)
                                                                                                                                                            0
                                                                                                                                                            UPD: практика в iOS 9.3 Safari преподнесла мне сюрприз — там кнопка остается красной и после последующих нажатий. Интересно, в чем дело — неужели в пресловутой 300-миллисекундной задержке?
                                                                                                                                                              0
                                                                                                                                                              Браузеры Apple добровольно изолированы от большей части внешнего мира, будучи доступными только в экосистеме самой Apple (читай — без версий для других ОС), поэтому какие-то индивидуальные отклонения в них неудивительны, тем более в столь синтетических тестах.
                                                                                                                                                      0
                                                                                                                                                      Css отличная штука, хотя складывается впечатление что ошибок бывает много, приходится придумывать разные костыли, типа клирфикса, верт. позиционирования, надеюсь со временем всё это вообще уйдет в небытие ))
                                                                                                                                                        +1
                                                                                                                                                        CSS, как и javascript — это просто инструмент. Те, кто этими технологиями не владеет, начинает обвинять технологию в чём-то, что у него не получается на ней сделать. А дело не в технологии.
                                                                                                                                                          +2
                                                                                                                                                          … а в том, что у неё нет альтернативы.
                                                                                                                                                          0

                                                                                                                                                          Есть такая вещь. Стандарт и реализация. Стандарт — вполне хорош, а вот реализация...

                                                                                                                                                            +4
                                                                                                                                                            Не хватит.
                                                                                                                                                            В вебе нет альтернатив CSS, ни в части селекторов (управление inline стилями через JS непроизводительно), ни в части графических возможностей (хотя некоторые от безысходности пытаются пилить интерфейсы на SVG или canvas).
                                                                                                                                                            И мы делаем «невероятно сложные, впечатляющие и красивые штуки в вебе» потому что мы хорошие разработчики, а не потому что это правильный инструмент.
                                                                                                                                                            Алсо откровенно сексистская подборка докладчиков не добавляет впечатления объективности от статьи.
                                                                                                                                                              +1
                                                                                                                                                              Нет, не хватит.
                                                                                                                                                              Есть за что поливать.

                                                                                                                                                              А по поводу примеров и «доказательств»… В вебе можно найти очень крутые рисунки, сделанные попиксельно в MS Paint. Являются ли они доказательством того, что Pain продвинутый, удобный и самодостаточный редактор?
                                                                                                                                                                +1
                                                                                                                                                                Просто мы слышим поколение нытиков-миллениумов. Все им не то и не так. Не прошли они через табличную верстку, однопиксельные распорки и адские хаки для кроссбраузерности.

                                                                                                                                                                CSS — отличный язык. Помню свое первое знакомство с ним в начале нулевых — когда a:hover выглядело необычайно круто (ведь для интерактива был не нужен JavaScript). А сейчас все его «недостатки» полностью нивелировали Sass, Less и PostCSS. Браузеры с тех времен реально шагнули вперед, технологии фронтенда — тоже. Что-то неудобно — пиши свой миксин Sass или плагин для PostCSS и используй. Ной не ныл и ты не ной.
                                                                                                                                                                  +1
                                                                                                                                                                  В качестве контраргумента к заявлениям о плохом синтаксисе приводить примеры с буханками из троллейбусов — это сильно.
                                                                                                                                                                  Хотя я считаю разговоры о синтаксисе css не более чем вкусовщиной. И не надо мешать синтаксис с багами реализации.

                                                                                                                                                                  Only users with full accounts can post comments. Log in, please.