продолжаем разговор о HTML5, CSS3 для SharePoint, начатый в статье “Размышляйте и пробуйте: HTML5, CSS3 для SharePoint. часть 1″,Часть 2 и Часть 3 .
CSS3 – это круто!
Спецификация CSS3 от W3C все еще находится в разработке, но правда состоит в том, что можно начинать использовать CSS3 прямо сейчас! Это новый стандарт оформления HTML-документов. CSS3 опирается на стили, селекторы и каскады, как и более ранние версии CSS. Но в нем добавлено множество новых возможностей и функций. Значительно расширен набор псевдо-классов.
То, что ранее требовало использования дополнительных внешних программ, скриптов или специальных “хитростей”, теперь с легкостью может быть достигнуто благодаря использованию новых свойств оформления.
Можно в CSS3:
- Делать с элементы с круглыми углами;
- Работать с линейными и сферическими градиентами;
- гибко работать с фонами элементов, в том числе с множественными фонами;
- делать тени у элементов и у текста;
- работать с небезопасными шрифтами;
- Создавать анимацию и различные эффекты переходов;
- Работа с Word Wrap – перенос длинных слов, не помещающихся в заданную область.
- Интереснейшая новинка — rem-единица («root em» — корневая em-единица) ( IE9+, FF 3.6+, Chrome, Safari 5+ и Opera 11.6+). Она позволяет основывать em-единицы на «корневой» единице, заданной в элементе . Размеры font-size элементов вычисляются на основе корневой em-единицы из корневого элемента html.
- Интересного много – многоколоночность, flexbox и сеточная разметка – все не охватишь.
Разбиение текста на несколько колонок осуществляется multi-column, при этом нет костылей в виде float’ов и позиционирования. Указывается ширину каждой колонки, а количество их ограничивается лишь шириной браузера. Т.е. текст как бы перетекает из одной в другую колонку.
Flexbox – это управление родительскими и дочерними элементами на странице, для того, чтобы расположить их в необходимом порядке.
И еще надо упомянуть о сеточной разметке, которая позволяет размещать контент отдельно от лэйаута, используя строки и колонки. В апреле 2012 года Microsoft представил CSS Grid Layout спецификация, поэтому она работает пока только в Internet Explorer 10. Но, учитывая фундаментальность проделанной работы, поддержка этого функционала другими браузерами — только вопрос времени.
CSS3 media queries – легкость перемен.
Это новая функция, которая позволяет веб-разработчикам определять стили для определенного дисплея. Существование множества устройств с экранами различного разрешения и самого разного размера требует, чтобы верстка адаптировалась под них. Набор правил для этого невелик и этой функцией уже можно и нужно пользоваться, если не хотите лишиться огромной части своих посетителей. Internet Explorer 8 или более старые версии данного браузера не поддерживает медиа запросы CSS3.
Поэтому, традиционно, – костыль – скрипт css3-mediaqueries.js.
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->Далее подключаем CSS файл для media queries, в котором для разных размеров экрана указывам стили.
Эрика Мейера спросили, что является самым интересным нововведением в CSS3? И он ответил: “Многие скажут, что я зациклен на коде, но – честно говоря — специальные селекторы. Конечно, конечно, прозрачность, закругленные углы, несколько фоновых изображений и красивые штучки бла-бла-бла. Все это очень хорошо. Но возможность описания Web 2.0 дизайнов с помощью CSS3 меркнет на фоне того, что можно выбрать каждую третью строку таблицы начиная с пятой. Или возможность выбрать первый параграф внутри другого элемента, который может не быть первым дочерним объектом. Или выбрать последний пункт в списке. Ну и вебшрифты это конечно круто.”
Мы рассмотрели вкратце HTML5 и CSS3 – зачем они нужны, что включают. Нужно ли их использовать в SharePoint ? Безусловно, их можно использовать в Microsoft SharePoint. Как мы имели возможность увидеть, они несложны в использовании, поддерживается практически всеми современными браузерами, а, главное, не надо сбрасывать со счетов перспектив развития. Думаю, из статьи понятно, что дает использование новых технологий для современных веб-сайтов, так и для SharePoint . К примеру, новые инпуты способны заменить стандартный control, благодаря чему существенно уменьшается количество разметки. Использование HTML5 в SharePoint – делает интерфейсы более простыми в использовании что означает улучшение качества работы и повышение удобства пользователей.
Поэтому – размышляйте и пробуйте!
Рубрика: 
Комментарии