Page 253 - Сила CSS3 Освой новейший стандарт
P. 253

Создание многостолбцовых макетов без плавающих полей  •  253


            ли гибкого поля: она требует дополнительного вкладывания блоков div, необязательного
            в большинстве моделей на базе плавающих блоков. Не настроив для этого внешнего блока
            div свойство display:box, вы не сможете превратить внутренний блок div в столбец. Несколь-
            ко дополнительных обрамляющих div-блоков — не такая большая проблема, особенно с
            учетом упрощения кода CSS и расширения возможностей верстки в новой модели гибкого
            поля — однако о них стоит упомянуть. Я — за полноту информации!




          СовмеСтимоСть С IE9

            Предварительная версия платформы IE 9, доступная на момент написания этой главы,
            поддерживает модель гибкого поля с добавлением к свойствам и значениям префикса
            -ms-, однако текущая бета-версия браузера IE 9 (более новая по сравнению с предвари-
            тельной версией платформы) не поддерживает эту модель ни с префиксом, ни без него.
            Очевидно, разработчики Microsoft решили избавиться от этой функциональности в бета-
            версии браузера. Вернут ли ее в финальную версию IE 9 и нужно ли будет использовать
            префикс — пока что неясно. Протестируйте свойства и значения с префиксом -ms- в IE 9
            и проверьте, поддерживаются ли они в этом браузере сейчас, когда вы читаете эту главу.
            Или же, для того чтобы подстраховаться на все случаи жизни, просто добавьте свойства
            со всеми существующими префиксами.



          Теперь сообщите браузеру, что дочерние элементы должны выводиться горизонталь-
          но. Используйте для этого свойство box-orient и его эквиваленты с различными
          браузерными префиксами:

          #content {
              display: -moz-box;
              display: -o-box;
              display: -webkit-box;
              display: box;
              -moz-box-orient: horizontal;
              -o-box-orient: horizontal;
              -webkit-box-orient: horizontal;
              box-orient: horizontal;
          }

          Когда вы присваиваете свойству display значение box, браузер автоматически уста-
          навливает для свойства box-orient значение inline-axis, что в языках, подобных
          английскому или русскому (с горизонтальным написанием), эквивалентно значению
          horizontal: блоки выводятся бок о бок, а не в столбец, один поверх другого. Таким
          образом, технически можно было бы и не добавлять свойство box-orient: блоки
          все равно выводились бы горизонтально. Однако я все же решила сделать это для
          ясности и чистоты объяснения; кроме того, вы должны узнать, как использовать
          это новое свойство.



                                                        www.trk.kg
   248   249   250   251   252   253   254   255   256   257   258