Будущее CSS разметки

    Питер Гасстон, автор книги по CSS3, опубликовал статью под названием The future of CSS layouts, перевод которой специально для читателей хабра представлен ниже.

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

    После нескольких лет обещаний, CSS3 наконец-то преуспел в стилях. Он добавил в наш арсенал целый набор новых инструментов, обеспечив нас закруглёнными углами, градиентами, прозрачностью, преобразованиями элементов, анимацией и многим другим. Что же ещё сможет порадовать наш глаз?

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

    Консорциум W3C и создатели браузеров в курсе этих проблем и работают над рядом решений. Лидером среди них является (как не удивительно) Internet Explorer. Похоже, что IE10 будет предвестником новой эры CSS разметки, которая позволит создавать отличные, динамические и привлекательные сайты, используя недосягаемые ранее возможности.

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


    Колонки


    Распределение контента между несколькими колонками является основным элементом печати и модуль CSS Multi-Columns даёт такую же возможность для web. Для создания колонок можно использовать два способа, каждый из них использует различные свойства (родительского элемента). В первом случае напрямую задаётся количество колонок, среди которых необходимо распределить текст. Например, этот код создаст три колонки одинаковой ширины, заполняя в сумме ширину родительского элемента:

    div { column-count: 3; }

    Во втором способе ширина колонок фиксирована, они будут повторяться до тех пор, пока не заполнят ширину родительского элемента. В этом примере ширина колонки установлена в 140px, значит в блоке шириной 800px должно появиться пять колонок:

    div { column-width: 140px; }

    По умолчанию, зазор между колонками равен 1em, но его можно сменить, используя свойство column-gap. Также между колонками можно разместить разделительные линии с помощью column-rule, похожий по синтаксису на свойство border. Представленный ниже код создаст пунктирную линию шириной 2px, а также установит отступ между колонками в 28px (разделитель будет располагаться посредине):

    div {
    	column-gap: 28px;
    	column-rule: 2px dotted #ccc;
    }

    Если хотите посмотреть результат, взгляните на пример реализации CSS колонок. Для того, чтобы увидеть три колонки, необходимо использовать Firefox, Chrome, Safari, Opera 11.1 или IE10 Platform Preview (IE10PP). Либо посмотрите на представленный ниже скриншот.

    CSS Columns provides an easy way to distribute long blocks of content into a more compact horizontal space

    С колонками можно делать разные вещи. Практический пример их использования есть в Википедии, в секции примечаний, где используется column-count. В Firefox многоколоночность реализована с префиксом -moz-, в Chrome и Safari с префиксом -webkit-, в Opera 11.1 и IE10PP без префиксов.

    Flexible box


    Модуль Flexible Box Layout (FlexBox) позволяет автоматически изменять размеры элементов внутри родительских без необходмости вычислять значения высоты и ширины. Например, представьте, что у вас есть два дочерних элемента и вы хотите, чтобы они заполнили родительский (который имеет различную ширину) таким образом, чтобы оба блока имели одинаковую ширину. Это можно сделать, используя процентные значения, однако, в случае наличия бордюров и отступов задача становится сложной. Решение с помощью FlexBox намного проще:

    .parent { display: box; }
    .child-one, .child-two { box-flex: 1; }

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

    .child-one { box-flex: 1; }
    .child-two { box-flex: 2; }

    Когда два элемента распределятся внутри родительского, ширина .child-two будет увеличиваться на два пикселя на каждый один пиксель .child-one. Если ширина родительского будет составлять 260px, а каждый дочерний по 100px, оставшиеся 60px распределятся так, что 40px будет отведено .child-two и 20px для .child-one.

    Эту концепцию легче будет понять на примере использования FlexBox (необходим Firefox, Chrome, Safari или IE10PP). Попробуйте изменить размер окна браузера и обратите внимание на масштабирование.

    По аналогии динамического изменения размера элементов, FlexBox позволяет также применять свойства к родительскому, управляющему распределением пустого пространства, устанавливающему позиции дочерних элементов. Свойство box-align влияет на ширину дочерних элементов, а парное свойство box-pack на их высоту. Ниже показано, как это работает:

    .parent {
    	box-align: center;
    	box-pack: center;
    	display: box;
    	height: 200px; width: 200px;
    }
    
    .child {
    	box-flex: 0;
    	height: 100px; width: 100px;
    }

    Элемент .child имеет значение свойства box-flex равным 0, таким образом, он не будет динамически менять размер, а также он в два раза меньше по высоте и ширине родительского элемента, который, в свою очередь, центрирован с помощью свойств box-align и box-pack. То есть, дочерний блок будет центрирован по вертикали и горизонтали.

    We showed how to make layouts with FlexBox in more detail in a previous article

    На данный момент FlexBox реализован в Firefox, Chrome, Safari и IE10PP с соответствующими браузерам префиксами (-moz-, -webkit-, and -ms-), а также существует JS Polyfill, Flexie, с которым можно поэкспериментировать. Помните, что синтакс изменился, детали в последних спеках.

    Таблица


    Совершенно новым в IE10PP является система табличной разметки. Перед её использованием необходимо определиться со строками и колонками. Для колонок можно использовать значения длины, auto keyword и новую единицу измерения fr (сокращение от fraction, относительное количество). Посмотрите на этот пример:

    div {
    	display: grid;
    	grid-columns: 1fr 3fr 1fr;
    	grid-rows: 100px auto 12em;
    }

    Этот код создаст таблицу из трех колонок, центральная из которых будет в три раза шире левой и правой, а также из трех строк, где верхняя будет 100px по высоте, нижняя 12em, а средняя расширится по высоте автоматически, в зависимости от длины контента.

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

    header { grid-column: 1; grid-column-span: 3; grid-row: 1; }
    nav { grid-column: 1; grid-row: 2; }
    article { grid-column: 2; grid-row: 2; }
    aside { grid-column: 3; grid-row: 2; }
    footer { grid-column: 1; grid-column-span: 3; grid-row: 3; }

    Вматриваясь в код, можно заметить, что контент на странице распределен по строкам и столбцам с помощью, соответственно, свойств grid-row и grid-column. Элемент article размещен во вторую колонку второй строки — центр таблицы 3х3. Также используется свойство column-span для элементов header и footer, которое растягивает их на все три колонки (подобно действует свойство row-span, которое здесь не использовалось).

    Демо разметки можно посмотреть в примере использования CSS Grid, но нужна платформа IE10. Если её нет, то просто взгляните на скриншот.

    A pretty standard three-column grid layout, built using CSS Grid properties only

    Упомянутые выше свойства полностью внедрены в IE10PP, поэтому можно с ними экспериментировать прямо сейчас. Однако, множество свойств всё ещё не реализовано.

    Шаблон


    Другим подходом к табличному представлению является модуль Template Layout. Он использует немного иной синтаксис, где сперва необходимо присвоить позицию блокам, используя буквенный символ и свойство position:

    header { position: a; }
    nav { position: b; }
    article { position: c; }

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

    div { display: 'abc'; }

    В данном случае отобразится три равномерно распределенных элемента в горизонтальной строке. Но можно повторять символы чтобы расширять колонки, а также использовать одинаковые символы на той же позиции в разных строках, чтобы расширять строки. В приведенном ниже примере элемент nav перекрывает две строки, а header и article перекрывают два столбца (код отформатирован для наглядности):

    div {
    display:
        'baa'
        'bcc';
    }

    Template Layout ещё не используется браузерами, но уже есть хороший скрипт polyfill на jQuery, который позволит поэкспериментировать, именно он использован в примере по ссылке. Результат выглядит также, как в примере с табличной разметкой, но код совсем другой.

    На демо-странице используется JavaScript, поэтому должно сработать на всех современных браузерах. Табличная разметка, возможно, будет поддерживать и синтаксис шаблона, как на приведенном ниже примере:

    header { grid-cell: a; }
    article { grid-cell: b; }
    div {
    	display: grid;
    	grid-template: 'a' 'b';
    }

    По функционалу этот код идентичен свойствам Template Layout, но также ещё не внедрён (а может быть никогда и не будет).

    Позиционируемые плавающие блоки


    Текущее свойство float позволяет тексту обтекать элемент слева или справа, но расширенное свойство в IE10PP позволяет усовершенствовать плавающий элемент, размещая его в любом месте, а соседствующий контент будет по прежнему обтекать этот блок. Для этого всего лишь понадобилось новое значение для свойства float:

    div {
    	float: positioned;
    	left: 200px; position: absolute; top: 100px; width: 250px;
    }

    Этот код создаст элемент 250px по ширине, расположенный слева на 200px и сверху на 100px от родительского объекта. По умолчанию, любой другой контент внутри родительского будет обтекать позиционируемый элемент со всех сторон, но это можно изменить различными значениями свойства wrap-type, например, когда текст обтекает элемент только сверху и снизу:

    div { wrap-type: top-bottom; }

    Можно комбинировать свойства позиционирования и табличной разметки, размещая элемент в таблице и позволяя контенту обтекать его со всех сторон:

    div {
    	float: positioned;
    	grid-column: 2;
    	grid-row: 2;
    }

    Если у вас имеется IE10PP, то можно посмотреть демо позиционируемого плавающего блока. Если нет, то результат показан на скриншоте ниже, его невозможно реализовать текущими возможностями CSS.

    A new style of layout only possible with new CSS properties, including Positioned Floats

    Exclusions


    Свойство float позволяет лишь прямоугольным элементам быть обтекаемыми, но в докуменации предусмотрены обтекания по форме. Идея пришла после использования модуля CSS Exclusions. В нём имеются два ключевых свойства. Первое, wrap-shape, позволяет создавать элипсы, прямоугольники или многоугольники, которые будут задавать форму обтекаемого контентом блока, например:

    div { wrap-shape: circle(50%, 50%, 100px); }

    Этот код создаст окружность с радиусом 100px, которая будет центрирована в родительском элементе. Можно использовать функцию polygon() для создания любой фигуры, указывая координатные пары, разделенные пробелом, например для треугольника:

    div { wrap-shape: polygon(0,100px 100px,100px 50px,0); }

    Когда уже имеется заданная фигура, внутренний контент можно сделать обтекаемым по этой фигуре, используя второе свойство wrap-shape-mode, как здесь:

    div {
    	wrap-shape: circle(50%, 50%, 100px);
    	wrap-shape-mode: around;
    }

    Работу CSS Exclusions в действии можно посмотреть, скачав прототип для Mac или Windows с лаборатории Adobe. Там имеется полная документация и несколько очень классных демо-файлов, например, такой:

    The text flows around the shape of the image thanks to CSS Exclusions

    Области


    Следующее предложение Adobe это CSS Области (Regions), задающие способ распределения контента внутри множества разных элементов. Это делается, в первую очередь, определением элемента, который будет обеспечивать другие контентом, используя уникальный строковый идентификатор в свойстве flow, а далее выбирается, какие области будут заполняться этим контентом с помощью функции from() свойства content:

    .content { flow: foo; }
    .target1, .target2 { content: from(foo); }

    Здесь контент будет браться из элемента .content, а далее распределятся сперва по элементу .target1 и если блока не хватит для отображения контента, то он будет продолжать отображаться в .target2. Контент не будет дублироваться в блоках, он будет начинаться в первом и продолжаться во втором (если необходимо). Чтобы лучше понять, просто взгляните на изображение ниже.

    Content from an element (not shown) flowing across three different elements, using CSS Regions

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

    Спеки по CSS областям ещё не были внедрены в браузеры, но по аналогии с Exclusions, можно использовать прототип с лаборатории Adobe и попробовать функционал самостоятельно.

    Заключение


    Пока что неясно, какие из новых модулей разметки (из FlexBox и Колонок) будут полностью внедрены в браузеры. Что касается плавающих блоков и Exclusions, хотелось бы их скрестить из-за похожести функционала (возможно, так и будет). Табличная разметка тесно связана с разметкой шаблонами и, несомненно, можно ожидать её появление в IE10. CSS области уже внедрены в одной из ветвей WebKit, и, вероятно, появятся в WebKit-браузерах (Safari, Chrome и других) очень скоро.

    Таким образом, можно прогнозировать, что с некоторыми изменениями в синтаксисе, всё описанное выше будет использоваться в CSS3 в будущем. Очень хорошо, если это произойдёт, так как, в этом случае, новые методы позволят с минимальными затратами создавать очень продуманные сайты всего через несколько лет.

    Similar posts

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

    More

    Comments 76

      +9
      светлое будущее
        +9
        О дайте, дайте мне переменные в CSS и выражения с переменными (математические и строковые хотя бы).
          0
          Попробуйте less css. Там все это есть.
            0
            Всяко это статика.
              0
              Переменные есть, выражения с переменными есть.

              lesscss.org/
                0
                Спасибо, я юзал лессцсс, знаю о чём говорю. Переменные есть, но это динамика лишь, когда это с серверной стороны стоит. И то это такая себе динамика. Иначе это простая статика, когда ты пишешь в лессцсс, а конвертишь в итоге в цсс.
                  0
                  Переменные в lesscss по сути — это константы. На ходу изменять их нельзя.
                0
                Вещи, вроде SASS и LESS — по большому счету, хаки — закрывающие недостатки современной модели самого CSS.
                  0
                  Пока современная модель недостатки свои не закроет, эти «хаки» очень упрощают жизнь для разработчиков.
                    0
                    Ну с этим то я ни спорю :) Самому очень нравятся эти штуки.
                +8
                и возможность использовать регулярные выражения чтобы заказ не могли передать другому верстальщику
                  +3
                  и чтобы можно было к процентам пиксели добавлять и т.д.
                    +1
                    На этот случай придумали функцию calc.
                  +3
                  Как иллюстрация к названию, у меня не загрузился CSS :)
                    +5
                    > Похоже, что IE10 будет предвестником новой эры CSS разметки

                    Да ну? ИЕ же не использует не утвержденные стандарты вроде как? Или уже использует? Определились бы уже наконец.

                    > но расширенное свойство в IE10PP позволяет усовершенствовать плавающий элемент

                    Начинается опять… Может стоит сначала полностью со старыми возможностями разобраться?
                      +1
                      Грид лайот — придуман МС и соотсвенно реализован раньше в ИЕ.

                      >>Начинается опять… Может стоит сначала полностью со старыми возможностями разобраться?
                      Чего не умеет ИЕ10 из того что вам нужно?
                        +4
                        Самое главное, чем не умеет ни одна версия ИЕ — грамотное обновление своих устаревших собратьев.

                        Какие конкретно сюрпризы нам принесет ИЕ10 мы еще узнаем в будущем, как обычно.
                          0
                          Давно реализовано через Windows Update (на маминой машине IE обновился до 9 версии именно через этот механизм, автоматически).

                          Другое дело, что не везде этот механизм включен администраторами.
                            +1
                            В теории.

                            Вынужден вас расстроить, но это и есть неграмотный механизм. Windows Update все сваливает в одну кучу и с ним практически невозможно работать. У меня на одном компьютере включен апдейт автоматический, так компьютером практически невозможно пользоваться — он постоянно находится на обслуживании (обновляется, тормозит, просит перезагрузиться). Браузер ДОЛЖЕН обновляться отдельно от системы.

                            Во-вторых, Windows Update действительно чаще всего выключают. Например те, кто использует нелицензионный Windows. Это данность. Но причем тут обновление бесплатного браузера? Он все равно должен обновляться.

                            В-третьих, ИЕ9, как мы все знаем, не ставится на XP. ИЕ10 очевидно тоже не будет.
                          +3
                          IE10 пока что не поддерживает Transition и Text Shadow. А это одно из самых замечательных свойств CSS3!

                          www.findmebyip.com/litmus/
                            –8
                            > Text Shadow — одно из самых замечательных свойств CSS3!
                            Text Shadow — самое страшное оружие в руках говнодизайнера.
                              +2
                              Text Shadow совсем не помеха говнодизайнерам.
                              Да и при чём тут дизайн то?
                                +1
                                Не понимаю с чего вдруг про дизайнеров вспомнили. Хорошие дизайнеры пришедшие в веб дизайн из полиграфии часто используют аккуратные тени на шрифтах для создания эффекта объема или вдавленности. Главное — все хорошо в меру.

                                Если так рассуждать, то наличие огромной палитры цветов — тоже страшное оружие в руках говнодизайнеров
                                  +2
                                  Да, давно пора вернуться к безопасным цветам =))
                                0
                                с другой стороны, часть переходов и тени давно реализованы в IE в виде фильтров (с версии 5.5, если не ошибаюсь).

                                меня больше волнует поддержка WebSockets.
                                  0
                                  За всю жизнь ни на одном сайте не видел использования text shadow — при том что он достаточно просто эмулируется через JS.
                                    0
                                    Разве кнопки с эффектом вдавленности или выпуклости не разу не видели? )
                                    Вот раньше их делали картинками.
                                      0
                                      Причем тут кнопки? Там box-shadow используется скорее. Он в ИЕ 10 есть, и даже в 9 есть
                                        0
                                        Я про однопиксельную белую тень.
                              0
                              В этом примере ширина колонки установлена в 140px, значит в блоке шириной /800px/ (700px) должно появиться пять колонок:
                                +2
                                Ширина указана правильно. Автор Хотел продемонстрировать, что в оставш еся 100 колонка не влезет, поэтому фактически их будет всего пять
                                  0
                                  извиняюсь, мой косяк
                                +1
                                Будущее здесь, а все равно приходится ждать.
                                  +21
                                  Огромная просьба поправить терминологию: «табличная верстка» в русском твердо закрепилась за версткой при помощи table. Верстку же при помощи grid лучше перевести как «сеточную», а само слово grid — как «сетку», а не как «таблицу».
                                    0
                                    Очень интересные и полезные нововведения планируются. Насколько я понял — первые две уже реализованы в современных браузерах (кроме ИЕ), а остальные всё еще в планах?
                                      +1
                                      Grid layout, конечно, круто. Эдак раз — и десятью строками разметил весь макет. Эх, когда же столь прекрасное время наступит…
                                        +2
                                        На примитивных примерах да. Чуть добавьте динамики и все, приехали. Костыли на костылях будут.
                                          0
                                          Динамика в фундаментальных блоках? Типа, хедер с футером двигаются?
                                            0
                                            Динамика это не только анимация. Динамика, это когда пользователь может самостоятельно изменять отображение страницы или же под влиянием внешних факторов скрипты меняют содержимое и отображение.

                                            Да, пользователь может сменить один вид отображения на другой, переместить блоки, включить или выключить расширенный/упрощенный вид отображения и так далее.
                                            0
                                            И какие будут костыли? Расставить несколько классов и прописать эти классы в CSS?
                                              0
                                              У нас есть вот такой темплейт
                                              a b b
                                              a b b
                                              c b b


                                              Блок поставили в "с". Потом понадобилось переставить его последним к блокам в секции "a", а сам лейаут заменить на другой, если в секции "с" не осталось ни одного блока.

                                              Мне вот интересно, как вы будете последний пункт исполнять…
                                                0
                                                Ну никто же не говорит, что grid — панацея. Тем не менее, в 90% случаев фундаментальные блоки неизменны и постоянны.
                                                  0
                                                  Это динамика на стороне клиента, которая решается скриптами, про какие костыли речь?
                                                  Как надо, по-вашему, это делать правильно?
                                                    0
                                                    Это динамика на стороне клиента. Костылями называю весь тот код, который нужно будет написать по реализации задуманного.

                                                    Надо это делать так, как и реализовано сейчас — поведение элементов должно зависеть от местоположения в DOM-дереве и от соседних блоков, которые находятся в потоке, а не прибивать гвоздем позицию.
                                            0
                                            Будем надеяться, светлое будущее наступит скоро, и даже очень сложные странички станет создавать очень просто.

                                            P.S. В CSS всегда «не радовало» то, что смешаны атрибуты задания внешнего вида (цвета, бэкграунды, прозрачности, и прочее) и структуры (позиция, обтекания, размеры, отступы и прочее).
                                              0
                                              Поскорее бы.
                                                +6
                                                Смущает то, что без префиксов всё это внедряется… Сhrome и Firefox по-интелегентному, с префиксами, мало ли чего… Из-за этого у меня, честно, никакой радости — больше проблем будет потом скорее всего!
                                                  0
                                                  Каких, например?.. Для меня вот проблема прописывание border-radius, -moz-border-radius и webkit-border-radius вместо одного свойства.
                                                    0
                                                    Примерно такие, какие были с box-model в IE5. Стандарт не утвержден, а MS уже всё реализовала
                                                      0
                                                      Ну если во всех (основных) браузерах делают один и тот же функционал, то почему бы не называть его одним и тем же именем?
                                                  +1
                                                  И все-таки решение MS с сеткой самое удачное и понятное. Нафига изобретать велосипед, дайте уже верстальщикам размещать дивы как таблицу, многие давно об этом мечтают.
                                                    0
                                                    А display: table вам чем не угодил?
                                                      0
                                                      По моему grid выглядит изящнее. Если я правильно понимаю, то содержимое в коде можно размещать произвольно, а потом с помощью CSS «расставлять» его как надо. Например, основной контент можно поместить в начало кода страницы, а всякие сайдбары уже за ним. Поисковым роботам это наверняка понравится
                                                        0
                                                        А потом поменяйте динамически местоположение какого-то блока. Я хочу посмотреть на ту гору волос, которые вы нащипаете себе за время реализации задуманного. Перемещение элемента по DOM-дереву не даст вообще никакого эффекта, а работа с CSSOM еще тот ад.

                                                        Расставить все в первый и последний раз и больше никогда не трогать страницу — вполне удобно будет (ну, если удобным можно назвать тонны кода, которые придется написать, судя по примерам), а вот что дальше с этим одороблом делать, одному только Майкрософту известно.
                                                          +1
                                                          Вы сами себе проблемы выдумываете. Посмотрите на html-код этого примера. Ничего лишнего нет. Есть только основные логические блоки, которые CSS-ом вставляются в нужные места сетки. Теперь попробуйте сверстать это DIVами с помощью display:table. Придется же основное содержимое заворачивать в другие дивы просто для того чтобы расставить все по местам. А в CSS будет display:table-row, display:table-cell, display:table-column — попробуй разберись какой ряд и ячейка.

                                                          С динамической сменой местоположения блока тоже не вижу никаких проблем. А вообще, никто же не забирает у вас старые свойства CSS, используйте их там где это будет целесообразней.
                                                            0
                                                            Руки оторвать тому кодеру, который такой примитивный пример придумал сделать на гридах.
                                                    +3
                                                    Баян.
                                                    Но что-то мне кажется, после этих наворотов будет только хуже.
                                                      0
                                                      Да не, все нафиг пошлют все эти вые**ны и будут верстать так, как проще. А это уж никак не «сетками».
                                                        0
                                                        Хз, хз. Если это действительно позволит отделить логическую и семантическую разметку от представления, то вполне можно ожидать вообще изменение сценариев над сайтами, в частности функцию верстальщиков, которые будут получать на входе HTML-разметку (все эти семантические плюшки HTML5) и «картинку», а и их задачей будет сделать только CSS. Не нужно будет никаких врапперов, не будет иметь значение порядок блоков и т. п. В общем то, что пытались сделать с помощью XML+XSLT=XSL-FO
                                                          0
                                                          Для статических страниц может это и будет работать, а вот для интерфейсов…

                                                          Интерфейсы DOM для управления контентом HTML в разы лучше и удобнее чем CSSOM. В текущем стандарте придется реализовать парсер CSS на JS, чтобы нормально управлять отображением только через CSS, а это немного дороговатое удовольствие во всех смыслах
                                                            +1
                                                            Никто не говорит про управление только CCS'ом — если нам нужен узел, которого нет в изначальном документе, то естественно обратимся к DOM чтобы его создать. И задавать CSS свойства динамически через DOM никто не запрещает. Но вот решил пользователь сменить раскладку виджетов на своей дашборде с 5х3 на 3х5. По-моему описанными методами это сделать намного проще, чем в CSS2.1 — заменить одной строчкой JS display: 'abcde' 'fghij' 'klmno' на display: 'abc' 'def' 'ghi' 'jkl' 'mno' разве не проще чем, скажем убирать float:none в трех местах и ставить их в пяти или создавать два tr и раскидывать между ними td по новой?
                                                        0
                                                        А пока нас впереди ждет лишь мучительный переход от того, что есть, к тому, что задумано.
                                                        0
                                                        Неужели хотят css-ом описать все полеты дизайнерской мысли, мне почему-то кажется что это не лучшее решение, всего все равно не предусмотришь, и приведет это в итоге к многомегобайтным спецификациям и тормозным браузерам (а может быть уже привело :)). Имхо всегда можно решить сложные задачи с помощью JS, а с типичными и нынешний css вполне справляется.
                                                          +1
                                                          Плохо он справляется, чтоб далеко не ходить нажмите Ctrl+U и увидите в частности
                                                          <div id="wrapper">
                                                          <div id="inner" >
                                                          

                                                          или

                                                          <div class="live bloginfo"> 
                                                           
                                                          	<div class="bg-bott-r"><!-- for bottom rounded corners --> 
                                                          	<div class="bg-bott-l"> 
                                                          ...
                                                          	</div> 
                                                          	</div><!-- // for bottom rounded corners --> 
                                                          

                                                          Что-то мне подсказывает, что к логической структуре этой страницы эти теги отношения не имеют
                                                            +2
                                                            Скажем, такие простые вещи как колонки очень геморно делаются с помощью JS, потому как много подводных гитик. И это очень востребованная и типичная вещь в эпоху широких, но невысоких мониторов.
                                                              0
                                                              Приписку на сайте нужно выводить «Для лучшего отображения контента поверните монитор на 90°» :D
                                                            –5
                                                            До текущего момента мы делали её, используя плавающие блоки, относительные позиции и трюки с отрицательными отступами, и всё это было сложно реализовать, чтобы результат был похож на стандартную двух- или трехколоночную разметку

                                                            Бред сивой кобылы.

                                                            1-я колонка
                                                            2-я колонка
                                                            3-я колонка

                                                            и что сложного?
                                                              0
                                                              Во всем этом светлом будущем лично пугает только одно — 10% пользователей ie6 (ie7, ie8 — неважно), браузер которых вообще не отобразит мою супер-бупер красивую страничку, сверстанную по html5. А поэтому либо делаем все по-старому (так и будет еще долго во всех коммерческих проектах), либо с костылями для не поддерживающих браузеров (ой как геморно).
                                                                0
                                                                Да, я граммар-полис, минусуйте. Но всё-таки, раздери меня гром:

                                                                > среди них является (как не удивительно) Internet Explorer
                                                                Как НИ удивительно.
                                                                  +1
                                                                  дело не в граммар-полис. дело в том, что для таких вопросов есть личные сообщения.
                                                                    0
                                                                    Окей, спасибо за подсказку.
                                                                  0
                                                                  div {
                                                                  display: grid;
                                                                  grid-columns: 1fr 3fr 1fr;
                                                                  grid-rows: 100px auto 12em;
                                                                  }


                                                                  WPF -> Grid -> (Row)ColumnDefinitions -> Такой сахорок мне по душе! Надеюсь реализуется.
                                                                    0
                                                                    Полезная-таки подборка. Уже давно не слежу за новыми фичами CSS. Интересно, как IE ввязывается в «процесс»)
                                                                      0
                                                                      непонятно что делать с flexbox, с одной стороны вроде бы можно пользоваться благодаря скрипту flexie, с другой стороны спека флексбокса уже поменялась на новую
                                                                        0
                                                                        А для ИЕ6 плагин для поддержки этого всего будет? ;)
                                                                          0
                                                                          Основная причина, по которой я не использую новые возможности, это необходимость для поддержки браузеров, не использующих новые технологии, писать дополнительный код в документе.

                                                                          Пример.
                                                                          Когда упрямый заказчик хочет тень текста и в IE тоже, то какой смысл в text-shadow… Всё равно придётся текст вставлять дважды. А потом объяснять ему, почему невозможно изменить его из админки CMS или, плеваясь, прикручивать js, который будет это делать.

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