CSS-константы: первые тесты уже на ваших экранах

    Несколько дней назад Daniel Glazman опубликовал на своем блоге новость о том, что он вместе с David Hyatt успешно реализовали идею о CSS-константах (статья в моем блоге). Уже сегодня каждый может увидеть CSS-константы в действии. Для этого нужно установить свежую версию WebKit Nightly Builds.

    Собственно, вот мой маленький тест: стили блока div я задала константами.
    CSS-константы

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

    Интересно, будет ли реализована возможность использовать не только константы, но и переменные, вида:
    @-webkit-variables {
    div1_height: auto;
    div2_height: 100px;
    div2_width: div1_height - div2_height; }

    Вот это было бы просто великолепным решением множества проблем в процессе верстки.

    Кросс-пост

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 51

      0
      Чем-то настораживают меня эти глобальные константы :(, не получилось бы так, что спустя какое-то время их использование станет плохим тоном...
      В любом случае спасибо за статью, буду с интересом ждать продолжения.
        0
        При том, что на одной странице могут подгружаться несколько css-файлов, действительно могут быть определённые неприянтности с использованием глобальных переменных.
        И пока использование глобальных переменных в css не кажется удобноиспользуемым.
          0
          Придумают namespace'ы :)
          0
          Согласен, блин. В CSS И так бордачить можно нехило. А так вообще чёрт ногу сломит.
          0
          Объясните в чем выхода. В том, что я в одном месте указываю свойство константе, а потом его вызываю много-много раз?
            0
            Позволит менять несколько параметров, и они изменятся во всей реализации.
              +1
              Ну дык, а кто мещает присвоить элементам один и тот же класс и менять его параметры?
                +2
                Ну ты забыл что с появлением компьютеров люди начали ломать голову над решением проблем которых раньше и не было?
                Здесь похоже такая же ситуация.
                  –1
                  на мой взгляд статическое изменение (то о чем было сказано выше) и динамическое изменение (в каждом классе небольшие изменения) спокойно решаются и с помощью наследования - не зря таблица стилей каскадной называется. пока весьма спорны применение этих переменных...
                    0
                    неумеренное применение нескольких классов к одному элементу иногда приводит к ухудшению читабельности кода. Имхо.
                      0
                      Ой спасибо, и ктож это мне карму в минус загнул?? Спасибо большое
                    0
                    Об этом спорили тут:
                    http://habrahabr.ru/blog/css/39699.html
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      скушал парсер :(
                      0
                      константы - это хорошо :)

                      PS: у вас ошибка в коде (fontcolor: red).. двоеточие пропустили. или без него прожевывается нормально?
                        0
                        нет, без двоеточия не работает :) Просто правила название и пропустила. Спасибо
                        0
                        года через 2-3 только появится не только в WebKit, к сожалению.
                        долго ждать.. индусы они же не быстрые
                          0
                          Приплюсуйте к этому сроку еще 2-3 года на поддержку старых броузеров.
                          0
                          CSS константы это то чего не хватало. Представьте большой файл темы в котором вы хотите сменить цветовую гамму?
                          Да ручками в конце концов можно это сделать... но сколько времени и нервов уйдет.
                          Да и вообще честно говоря не понятно, почему в css не реализованы константы
                            –1
                            а так:
                            общий элемента{параметры}
                            style1,style2...{параметр бг}
                            style1,style2...{параметр колор}
                            ?
                            Я при верстке в первую очередь (как я думаю и многие) объявляю "константы" (ммм, так их называю)...
                              0
                              Скажем так, это не совсем константы.... даже скорее совсем не константы. :)
                                –1
                                извините но чем же так радикально они отличаются от "констант" приведенных выше?
                                грубо говоря это подход для "сегодняшнего дня" когда вместо class="класс1 класс2_подстройка..." мы опираемся на имя_тэга.

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

                                    вы же сами написали:
                                    style1,style2...{параметр бг}
                                    style1,style2...{параметр колор}
                                    очевидно, что это не все свойства селкторов style1 и style2, то есть они ещё дальше будут описаны. вот и получаем каждый селектор уже в 3х разных местах. это удобно?

                                    просто я тоже долго думал как обойти отсутствующие константы в css. ваш метод конечно пробовал. для меня "размазаность" селекторов перебивает все плюсы констант.
                                    вам это не мешает?
                              0
                              div1_height - div2_height это calc()
                                0
                                calc() будет только в FF 3.1
                                  0
                                  и?
                                    0
                                    просто факт =)
                                      0
                                      просто я к тому, что автор спрашивал "будет ли" и, учитывая, как он это описал, то он не в курсе на счёт calc(). Хотя его да, ещё нет пока что :)
                                    0
                                    Вы не в курсе, в опере что-то подобное планируется, или может уже есть?
                                      0
                                      в опере из нового:

                                      @media queries
                                      text-shadow
                                      -o-background-size
                                      opacity
                                      hsl colours
                                      overflow-x & overflow-y
                                      all css selectors
                                      form pseudo-classes

                                      статья тут
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    но expression - не самое лучшее решение
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        обычная сss кроссбраузерная верстка
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            0
                                            на данный момент их нельзя нигде применить кроме вышеописанного в статье, так что ничего другого не остается, кроме JS еще конечно.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Нахрена константы? Посмотрел по ссылке. Достаточно грамотно написать классы и сгруппировать их.

                                      Вот например у нас блок шапки, логотип в ней и ещё пара кусков имеют одинаковую высоту и фон.

                                      И подвал имеет такую же высоту и цвет фона. Задали мы в 5—6 элементах свойство переменной. А потом надо разделить подвал и шапку и снова здорово…
                                      То есть по логике шапку и вложенные элементы надо описывать в одном блоке, а подвал в другом (не зависящем).

                                      Константы удобны только в роботизированных темах, чтобы быстро их менять. И то сгруппировать классы никто не мешает, либо писать классы так: «class="standart alt bigborder"». Пусть будут, но пока не нужны. Появятся когда во всех браузерах, тогда для них возникнут задачи. А пока всё это реализуется через скрипты на стороне сервера.
                                        +1
                                        Допустим у меня на странице используется три цвета шрифта. Причем использование этих цветов хаотично (не задать общий класс). Использование классов типа: big, red, border - фи...
                                        В таких случаях очень подойдет переменная.
                                          0
                                          я не принял ещё какуюто из сторон, но это уже походит на ламеризацию css, деградирование. также думаю это затруднит отладку чужого кода
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                              0
                                              Не спорю, не сталкивался. Если есть возможность, найдётся и задача. Но я предпочитаю минимум задач и аскетичное решение.

                                              1. Для шаблонов хорошо, не спорю. В данном случае я напишу в CSS классы через запятую и задам им цвет. А если у нас в одном шаблоне цвет фоновый, а в другом цвет шрифта, то всё равно CSS надо менять. Не вс ли равно, присваивать ли свойству значение константой или добавлять класс к общему правилу? И вообще это вопрос массовки уже. А делать стилизацию массовкой смысла нет. Можно просто делать копию и не париться. Я понимаю, что так например проще покрасить админку в фирменные цвета клиента (один фиг дизайн специально никто делать не будет). Однако можно просто заранее спланировать структуру, выявить наиболее часто повторяющиеся свойства, наиболее редко повторяющиеся. А уж пройтись автозаменой по CSS файлу — невеликий труд (и не сложнее, чем одну переменную заменить).

                                              2. Тут согласен. Математические вычисления в любом случае гораздо удобнее проводить с переменными или константами. Но я не склонен создавать такие зависимости. Предпочитаю вложенность блоков и процентные соотношения, а так же размеры в em/ex — это тоже вычисляемые значения. Конечно таких сложных зависимостей не создашь, но мне и так достаточно. Есть конечно expression для вычислений, но пока валидным не считается.
                                            0
                                            Идей переменных и констант уже реализована посредством XCSS. Т.е. суть такая что есть файлик с набором переменных для какого то скина и есть XCSS файлик, в котором содержаться маппинги CSS селекторов на скины.
                                            Вот примерно так:

                                            ----XCSS file -----
                                            <u:selector name=".rich-fileupload-toolbar-decor">
                                            <u:style name="border-bottom" value="1px solid" />
                                            <u:style name="border-top" value="1px solid" />
                                            <u:style name="border-left" value="1px solid" />
                                            <u:style name="padding" value="2px" />
                                            <u:style name="background-color" skin="additionalBackgroundColor" />
                                            <u:style name="border-bottom-color" skin="tableBorderColor" />
                                            <u:style name="border-top-color" skin="tableBackgroundColor" />
                                            <u:style name="border-left-color" skin="tableBackgroundColor" />
                                            <u:style name="width" value="100%" />
                                            </u:selector>

                                            ----Skin file----

                                            tableBackgroundColor=#FFFFFF
                                            tableFooterBackgroundColor=#cccccc
                                            tableSubfooterBackgroundColor=#f1f1f1
                                            tableBorderColor=#C0C0C0
                                            tableBorderWidth=1px

                                            Такой подход юзается в RichFaces для реализации скиннинга.
                                              0
                                              Тут всё понятно. Но скучно. Интересней если например вручную выбирать основной цвет, к нему на полуавомате пару дополнительных, а всё остальное вычисляется. Вот тогда круто.
                                              0
                                              CSS константы реализованы в плагине nested css для Ruby on Rails. В двух словах, серверсайд эмулирует то, о чем все так давно мечтали. Да и со вложенностью работа поинтереснее.
                                                0
                                                Константы, конечно, дело хорошее, но без примитивного ветвления толку от них мало.
                                                  0
                                                  По мне удобнее был бы импорт классов. Напр.

                                                  .line{width:100%;height:1px}
                                                  .red{background:red}

                                                  #red_line{import:classes(line red)}

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