W3C Дайджест. Что нового в CSS3. Выпуск 3

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

    Предыдущая часть тут

    Анимация скрытых объектов




    Похоже, одной из серьезных проблем для модуля CSS3 Animations станут объекты, которые имеют display: none и visibility: hidden.

    В данной спецификации свойства, которые невозможно проитерировать, игнорируются. Однако есть пример, когда это делать не стоит. Допустим, есть блок, если ему присвоить некий класс hidden, то он должен плавно раствориться и полностью убраться из потока. Вполне нормальное поведение, которое уже присутствует во многих JS-библиотеках.

    Код должен быть таким:
    div {
        display:block;
    }
    
    div.hidden {
        display:none;
        animation: slide-out 1s 1;
    }
    


    Однако, если указано свойство display:none, анимации не будет. Ну правильно, кому нужна анимация для скрытых объектов?

    Но, если указать вот такой код для декларации анимации
    @keyframes slide-out {
        0% { display:block; opacity: 1; }
        100% { display:none; opacity:0; }
    }
    

    и не игнорировать неитерируемые свойства, то получается вполне логичная картина. Если браузер понятия не имеет, что такое анимация, то он просто скроет блок, так как сработает правило display:none в div.hidden. Если же поддержка анимации есть, то в начале анимации блоку будет возвращено значение свойства как block, проитерировано свойство opacity, и в конце блок будет скрыт.

    Это не первая проблема с анимацией скрытых объектов, и далеко не последняя.

    Градиенты станут проще?


    Для упрощения синтаксиса градиентов было предложен новое ключевое слово transparent, чтобы можно было записывать вот так:
     linear-gradient(red, transparent, blue);

    вместо
     linear-gradient(red, rgba(255,0,0,0) 50%, rgba(0,0,255,0) 50%, blue);

    Для обычных кодеров первый вариант, конечно же, многократно удобнее второго.

    Ты куда кликнул?


    Еще одно очень полезное предложение поступило для модулей 2D и 3D трансформации. Допустим, у нас есть квадрат. Мы поворачиваем его на 45 градусов и получаем ромб. Пользователь кликает на ромб, и нам нужно узнать, какие координаты клика относительно ромба, а не всего окна. Тут может выручить разделение на события, которые были навешаны на window и события document'a. В первом случае поведение остается как и предже, координаты клика отсчитываются относительно окна, а во втором случае они берутся в относительных координатах элемента. Это край необходимо для дальнейшего развития этих модулей, иначе для рассчетов координат нужно будет постоянно применять сложные вычисления на JavaScript.

    На этой неделе все, спасибо за внимание!
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

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

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

      +6
      Интересно. Но:

      Допустим, у нас есть квадрат. Мы поворачиваем его на 45 градусов и получаем ромб.


      Вспомните школьную геометрию. Во-первых, квадрат всегда есть ромб, во-вторых, от поворота он квадратом быть не перестаёт.
        –6
        А еще квадрат и ромб — это частный случай параллелепипеда. Ну и что? Суть от этого не меняется.
          +1
          Паралелограмма, простите.
            0
            Параллелограмма 8-)

            А про суть я и говорю: интересно.
            +3
            А ромб — это частный случай четырехугольника. А четырехугольник — частный случай многоугольника. А многоугольник — частный случай n-мерной фигуры, которая была получена путем пересечения ее с двумерным пространством. А поворот — частный случай трансформации матриц.

            Что вы своим «замечанием» сказать хотели? Так говорить неправильно?
              0
              * который был получен
                0
                Ну да. Неправильно говорить так, как будто от поворота квадрат перестаёт быть квадратом, зато внезапно появляется ромб. «Получаем ромб» — это неверно, мы его имеем с самого начала.
                  +1
                  А я не говорил, какой именно поворот был произведен, в каком именно измерении по какой именно оси. Так что ваше возражение некорректно.

                  Как вы отличаете между собой равносторонний ромб и квадрат? Расскажите, мне интересно стало.
                    0
                    Какая разница. Ромб уже был до поворота.

                    Согласен, квадратом он мог перестать быть, если под поворотом Вы подразумевали операцию, лишившую его прямых углов. Но я в этом сомневаюсь. Мы же в контексте CSS3-трансформаций беседуем?
                      +1
                      Да, мы говорим в контексте CSS3-трансформаций, которая включает в себя 2D и 3D преобразования.

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

                      Я так понял, что вам не интересно говорить о сути статьи, вам нравится троллить автора. Не утруждайте себя, я больше не буду кормить вас.
                        +1
                        Я никого не троллю, я вежливо, отметив ценность самой статьи, указал на одну небрежность в словоупотреблении и удивлён Вашей резкой реакцией.

                        …«Ромбов не существует» — это надо же. Кто тут после такого заявления тролль?
                      +1
                      равносторонний ромб


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

                      Например, там есть определение ромба: это четырёхугольник, у которого все стороны равны.
              +1
              Простите но у меня 1 небольшой вопрос. Какие браузеры уже поддерживают свойство animation?
              Не так давно смотрел различные примеры с данным свойством но во многих местах была подпись: «На момент выхода статьи в прямом виде это свойство не поддерживается ни одним из распространенных браузеров».
                +1
                Webkit точно поддерживает и давно уже. Вот пример 3д модели созданной только с помощью CSS3

                  +2
                  Извиняюсь, запостилось, несупел допсиать. Смотреть в Chrome, Safari (iPhone/iPad/iPodtouch). Лучший рендеринг показывает на iPad.

                  majorov.su/3d/
                  0
                  Полностью сделать анимацю кроссбраузерно средствами CSS сейяас невозможно, так что приходится делать что-то вроде таких вот вещей (накидал пример для наглядности) jsfiddle.net/Wk9VP/19/
                    0
                    А нет для этого Javascript-библиотеки? Я имею в виду не для анимации, а конкретно для поддержки этого модуля CSS.
                      0
                      Есть некий фреймворк (хз как он поддерживается) extralogical.net/projects/firmin/

                      Он реализует интерфейс для управления CSS3 свойствами анимации. Работает, соответственно и как заявляет сам автор только в

                        0
                        Да что же сегодня такое… Опять ложный пост…

                        Так вот

                        Currently, the only supported platforms are those that use a recent version of the WebKit engine: Safari 4 and 5, Mobile Safari (i.e. iPhone and iPad) and Google Chrome.
                          0
                          Ну, это, как бы, не совсем то. Вернее, совсем не то. Эта же библиотека, если я верно понял, реализует из Javascript доступ к CSS3-анимации (причём, естественно, только там, где она и так есть). А нужно, чтобы скрипт брал информацию об анимации из стилей и реализовывал её кроссбраузерно. Тогда модуль можно было бы уже смело использовать.
                            0
                            Это было бы удачным решнием, но невыполнимо с текущим CSSOM. Правила, которые имеют невалидный синтаксис, не попадают в объектную модель. На этом недавно акцентировали внимание и предложили хранить в объектной модели все правила без исключения, в том числе и ошибочные, которые для данного браузера будут ошибочными, а через время они могут стать поддерживаемыми.
                              0
                              Во-первых, синтаксис-то вполне валидный (кажется), не валидна лексика, имена правил. Во-вторых, наверное, не не валидный, а не поддерживаемый данным конкретным браузером. Но это уточнения, в общем согласен.

                              Но «невыполнимо» — это слишком сильное утверждение. Что мешает скрипту считывать CSS-файл через аякс и самостоятельно парсить? Кажется, некоторые библиотеки, реализующие CSS2 и CSS3 для старых браузеров, так и поступают.
                        0
                        Спасибо. Посмотрел на iPhone, iPad и под виндой в FF, Safari. iPhone, iPad отображают все плавно и красиво, а вот под виндой что в Safari, что в FF конечно все так плывет что лучше не делать такого на сайте =)
                        Ну будем ждать пока все браузеры будут поддерживать все свойства и нормально их отображать.
                        0
                        Честно говоря, я не слежу за имплементацией свойств в браузерах. Это статья про начальные стадии разработки стандартов, до их реализации в коде может пройти вечность.
                          +1
                          Apple добавил все эти фишки еще в 2007г как минимум. Меня 3д анимация впечатлила тогда в браузере iPhone. Я думал что это чисто эппловская фишка, а как оказалось — это все согласно стандарту, пусть и драфтовому…
                            0
                            Авторы черновика CSS3 Animations и CSS 3D Transforms — ребята из Apple, и первые упоминания о этих документах значатся 2009м годом. Так что тут в действии принцип w3c — если что-то было реализовано и это полезно, то надо занести это в спецификацию.
                              0
                              > принцип w3c — если что-то было реализовано и это полезно, то надо занести это в спецификацию.

                              Ээээ. С каких пор это прицип w3c? :)
                        0
                        > Похоже, одной из серьезных проблем для модуля CSS3 Animations станут объекты, которые имеют display: none и visibility: hidden.

                        Та же проблема с CSS3 transition когда делаешь
                        #test1 {
                        opacity: 1;
                        transition: opacity .5s default, display 0 default .5s;
                        }
                        #test1.hidden {
                        display: none;
                        opacity: .2;
                        }


                        И ожидаешь, что изменение значения display отложится на .5s. Но этого не происходит! Я до сих пор не могу понять почему этого нету в стандарте.

                        Итого: чтобы решить проблему с «объектами, которые имеют display: none и visibility: hidden» просто нужно разрешить transition-delay для display и hidden. ВСЁ!

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

                        Самое читаемое