Создаём кросс-браузерный тачскрин-интерфейс для старого или нового сайта.

Наступило время, когда планшетные персональные компьютеры и коммуникаторы плотно вошли в нашу жизнь и продолжают с фантастической скоростью набирать популярность среди пользователей с каждым днём все больше и больше. Но работать с сайтами, где ссылки тонкие и рассчитаны на курсор-указатель "мыши" для стационарного ПК или ноутбука, с планшета или коммуникатора абсолютно неудобно. Нам нужно сделать красиво, удобно и так, чтобы существующий шаблон (если сайт уже есть) не особо пострадал.

Итак, постановка задачи:
  1. без глобальных доработок сделать удобную работу со старым или новым сайтом на планшетном и обычном ПК, коммуникаторе;
  2. постараться обеспечить максимальную кросс-браузерность (в основном, для IE)


Приступим к решению и реализации...

Возьмем некий простой пример содержания страницы:

<body>

<h1>Заголовок статьи</h1>

<h2>Название раздела</h2>

<p style="text-align:justify">
 <img src="img/img.jpg" align="left">Текст первого параграфа <a href="#test">с тестовой ссылкой.</a>

А́йсберг (нем. Eisberg, «ледяная гора») — крупный свободно плавающий кусок льда в океане или море.
Как правило, айсберги откалываются от шельфовых ледников. Природа айсбергов была впервые верно
объяснена русским учёным Михаилом Ломоносовым. Поскольку плотность льда составляет 920 кг/м³,
а плотность морской воды — около 1025 кг/м³, около 90 % объёма айсберга находится под водой.

Форма айсберга зависит от его происхождения:

Айсберги выводных ледников имеют столообразную форму с слегка выпуклой верхней поверхностью
которая расчленена различного вида неровностями и трещинами. Характерны для Южного океана.

Айсберги покровных ледников отличаются тем, что их верхняя поверхность практически не бывает
ровной. Она несколько наклонена, наподобие односкатной крыши. Их размеры, по сравнению
с другими видами айсбергов Южного океана, наименьшие.

Айсберги шельфовых ледников имеют, как правило, значительные горизонтальные размеры
десятки и даже сотни километров). Их высота в среднем составляет 35—50 м.
У них ровная горизонтальная поверхность, почти строго вертикальные и ровные боковые стенки.
</p>

<p>Текст второго параграфа <a href="#test">с тестовой ссылкой.</a> Еще немного текста.</p>

</body>

в браузере (IE и других) выглядеть он будет так:



Теперь сделаем стиль для шаблона (CSS-файл) и подключим его в разделе <head> нашей страницы.

Содержимое CSS-файла:
body{

    font-family: Helvetica, 'Times New Roman', Times, sans-serif;

    font-size:16px;



    background-color:#F0F0F0;

    text-shadow: 0px 1px 0px #FFFFFF;

    filter: dropshadow(color=#FFFFFF,offX=0,offY=1);

}



h1,h2 {

text-shadow: 0px 1px 0px #FFFFFF;

}



a {
    display:inline-block;

    width:auto !important;



    background:#E0E0E0; 

    font-size:16px;

    text-align:center;

    border-radius: 8px;



    box-shadow: 0 0 8px #000;

    -webkit-border-radius: 8px;

    -webkit-box-shadow: 0 0 8px #000;

    -moz-border-radius: 8px;

    -moz-box-shadow: 0 0 8px #000;

    border: 0px solid #222;



    padding: 0.2em 0.5em 0.2em 0.5em;

    margin: 0.2em 0.5em -0.2em 0.5em;

   text-decoration:none;





}



* a:hover {

    background:#F0F0FF; 

}





p {

    color:#202020; 

    background:#F0F0F0; 

    border-radius: 8px;

    box-shadow: 0 0 8px #000;

    -webkit-border-radius: 8px;

    -webkit-box-shadow: 0 0 8px #000;

    -moz-border-radius: 8px;

    -moz-box-shadow: 0 0 8px #000;

    border: 1px solid #CCC;



overflow:hidden;

text-align:justify;

padding:10px 10px 10px 10px;

margin:10px 10px 10px 10px;



}



p:hover {

    background:#FFFFFF; 

}



img {

    border-radius: 8px;

    box-shadow: 0 0 8px #000;

    -webkit-border-radius: 8px;

    -webkit-box-shadow: 0 0 8px #000;

    -moz-border-radius: 8px;

    -moz-box-shadow: 0 0 8px #000;

margin:25px 25px 25px 25px;

}
Кладем в папку CSS под именем style.css и подключаем внутри тега <head> на странице: 
<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- здесь то, что было выше: содержимое body -->
</body>
</html>

Смотрим на результат в Google Chrome:


Вроде все работает. Теперь открываем ту же страницу в IE 8.0:



И видим, что никаких теней и закругленных углов нет...


И мы продолжаем наш тернистый путь к кросс-браузерности...

На помощь нам приходят несколько модулей JS:
Выражаю огромную благодарность всем, кто разрабатывает эти модули! Огромное Спасибо!

Ввиду того, что ссылка на плагин "jQuery plugin text-shadow" нерабочая, выкладываю здесь авторский оригинал кода библиотеки textshadow без изменений: 
/* Created by Martin Hintzmann 2008 martin [a] hintzmann.dk
 * MIT (http://www.opensource.org/licenses/mit-license.php) licensed.
 *
 * Version: 0.2
 * Requires: jQuery 1.2+
 * http://plugins.jquery.com/project/textshadow
 *
 */
(function($) {
 $.fn.textShadow = function(option) {
  if (!$.browser.msie) return;
  var IE6 = $.browser.version < 7;
  return this.each(function() {
   var el = $(this);
   var shadow = el.textShadowParse(this.currentStyle["text-shadow"]);
   shadow = $.extend(shadow, option);

   el.textShadowRemove();

   if (shadow.x == 0 && shadow.y == 0 && shadow.radius == 0) return;

   if (el.css("position")=="static") {
    el.css({position:"relative"});
   }
   el.css({zIndex:"0"});
   if (IE6) {
    el.css({zoom:"1"});
   }
   
   var span=document.createElement("span");
   $(span).addClass("jQueryTextShadow");
   $(span).html(el.html());
   $(span).css({
    padding:  this.currentStyle["padding"], 
    width:  el.width(),
    position: "absolute",
    zIndex:  "-1",
    color:  shadow.color!=null?shadow.color:el.css("color"),
    left:   (-parseInt(shadow.radius)+parseInt(shadow.x))+"px",
    top:   (-parseInt(shadow.radius)+parseInt(shadow.y))+"px"
   });
   
   if (shadow.radius != 0) {
    if (shadow.opacity != null) {
     $(span).css("filter", "progid:DXImageTransform.Microsoft.Blur(pixelradius="+parseInt(shadow.radius)+", enabled='true', makeShadow='true', ShadowOpacity="+shadow.opacity+")");
    } else {
     $(span).css("filter", "progid:DXImageTransform.Microsoft.Blur(pixelradius="+parseInt(shadow.radius)+", enabled='true')");
    }
   } 
   el.append(span);
  
   });
 };
 
 $.fn.textShadowParse = function(value) 
 {
  value = String(value)
   .replace(/^\s+|\s+$/gi, '')
   .replace(/\s*!\s*important/i, '')
   .replace(/\(\s*([^,\)]+)\s*,\s*([^,\)]+)\s*,\s*([^,\)]+)\s*,\s*([^\)]+)\s*\)/g, '($1/$2/$3/$4)')
   .replace(/\(\s*([^,\)]+)\s*,\s*([^,\)]+)\s*,\s*([^\)]+)\s*\)/g, '($1/$2/$3)')
 
  var shadow = {
   x      : 0,
   y      : 0,
   radius : 0,
   color  : null
  };

  if (value.length > 1 || value[0].toLowerCase() != 'none') {
   value = value.replace(/\//g, ',');
   var color;
   if ( value.match(/(\#[0-9a-f]{6}|\#[0-9a-f]{3}|(rgb|hsb)a?\([^\)]*\)|\b[a-z]+\b)/i) && (color = RegExp.$1) ) {
    shadow.color = color.replace(/^\s+/, '');
    value = value.replace(shadow.color, '');
   }

   value = value
    .replace(/^\s+|\s+$/g, '')
    .split(/\s+/)
    .map(function(item) {
      return (item || '').replace(/^0[a-z]*$/, '') ? item : 0 ;
     });

   switch (value.length)
   {
    case 1:
     shadow.x = shadow.y = value[0];
     break;
    case 2:
     shadow.x = value[0];
     shadow.y = value[1];
     break;
    case 3:
     shadow.x = value[0];
     shadow.y = value[1];
     shadow.radius = value[2];
     break;
   }
   if ((!shadow.x && !shadow.y && !shadow.radius) || shadow.color == 'transparent') {
    shadow.x = shadow.y = shadow.radius = 0;
    shadow.color = null;
   }
  }

  return shadow;
 };

 $.fn.textShadowRemove = function() {
  if (!$.browser.msie) return;
  return this.each(function() {
   $(this).children("span.jQueryTextShadow").remove();
  });
 };
})(jQuery);

if(typeof Array.prototype.map == 'undefined') {
 Array.prototype.map = function(fnc) {
  var a = new Array(this.length);
  for (var i = 0; i < this.length; i++) {
   a[i] = fnc(this[i]);
  }
  return a;
 }
}

Загружаем необходимые для работы файлы по ссылкам и распределяем их по папкам:

  1. Извлекаем из архива PIE-######.zip папку PIE-###### и переименовываем её в просто PIE (для удобства дальнейшего обновления);
  2. Cоздаём  папку js на одном уровне с файлом статьи;
  3. Помещаем папку PIE внутрь папки js;
  4. Файл jquery.textshadow.js помещаем в корень папки js

В конечном итоге получаем:
js/PIE/
js/jquery.textshadow.js

Я не буду здесь подробно останавливаться на способах подключения и применения API этих модулей (по ссылкам все можно подробно прочитать), а просто приведу свой код (как я сделал):
<head>

<link href="css/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!--[if IE]>

<script type="text/javascript" src="js/jquery.textshadow.js"></script>

<script type="text/javascript" src="js/pie/PIE.js"></script>

<![endif]-->



<script type='text/javascript'>       

$(function() {

  if ($.browser.msie && window.PIE) {


    var page = document.body.all;

    for(var i = 0; i < page.length; i++) {



       if (page(i).currentStyle['text-shadow']!==undefined) {

           $(page(i)).textShadow();

         }



       if (page(i).currentStyle['border-radius']!==undefined

           || page(i).currentStyle['box-shadow']!==undefined

           || page(i).currentStyle['linear-gradient']!==undefined

          )  {

          PIE.attach(page(i));

            }

    }



  }

});

</script>



</head>

Кратко по коду:
  1. Подключаем jQuery;
  2. Если IE - загружаем библиотеки для поддержки отображения CSS3 стилей в IE.
  3. В момент загрузки страницы, если это IE - перебираем все элементы и, если у них заданы известные для этих библиотек стили отображения CSS3, применяем нужные функции от нужных библиотек.



В итоге, все элементы содержащие свойства стиля CSS3 (text-shadow,border-radius,box-shadow,linear-gradient) будут преобразованы этими JS-модулями к виду, понятному IE для правильного отображения.

Конечный результат в IE 8.0 после загрузки первоначальной страницы с новым содержанием раздела <head> и первоначальным содержанием <body> (в CSS-файле - изменения не требуются):



И приближенный вариант изображения (в IE 8.0):



Реальный размер в IE 8.0 ("кликните" по изображению для увеличения):

Здесь еще много чего можно и НУЖНО дорабатывать, но основную суть, думаю, мне удалось донести до вас.

Всем огромное Спасибо за внимание. 

Hash-tags: , , , , ,

Подписка на новости:

RSS/Atom

Самые полезные и признанные экспертами публикации в сферах IT-бизнеса и Web-разработки:

Сертификат

Certificate for nickname xmoonlight, is registered to: https://sitecoder.blogspot.com