воскресенье, 13 марта 2011 г.

Debugger для iPad и iPhone

Для отлова ошибок разработчики Apple предоставили всего лишь debug console  - маленькую, почти ничего не говорящую и ничего не позволяющую сделать консоль. Интересно, вот сами они смогли бы работать в таких условиях? 

Для того, чтобы получать более информативные сообщения гораздо лучше использовать  Firebug lite. Полноценно работать все равно не получится из-за очень мелкого интерфейса, хотя может кто-то и приспособится...

Для того, чтобы начать пользоваться Firebug lite нужно указать путь к нему в head страницы: 

<script type="text/javascript" src="http://getfirebug.com/firebug-lite.js"></script >

После этого нижнем углу экрана появится знакомая иконка с жучком. Теперь можно просматривать DOM и выводить нормальные информативные сообщения.

Как переключать СSS при изменении ориентации экрана iPad (iPhone)


Как переключать СSS при изменении ориентации экрана (orientation change) без скриптов:
Пишем в HEAD страницы вместо <link rel="stylesheet" href="css/style.css"> :

<link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="css/landscape.css">

Соответственно создаем portrait.css и landscape.css с нужными стилями. И все.

Прозрачность png в IE6

Конечно, AlphaImageLoader, а как иначе?
Обожаю это решение, работает 99%:
* html .g-png24 {
 behaviour:expression(
  (!this.fixedPNG?
   (function(el){
    var fixSrc = "", sizingMethod = "crop";
    if (el.tagName.toLowerCase() == "img") {
     fixSrc = el.src;
     sizingMethod = "image";

     el.style.width = 1;
     el.style.height = 1;
     el.src = "";
    }
    else {
     var tmpImg = new Image();
     tmpImg.src = el.currentStyle.backgroundImage.split('\"')[1];
     if (parseInt(tmpImg.width) == 1 || parseInt(tmpImg.height) == 1 || el.className.indexOf('g-png-24__scaled') > -1) {
      sizingMethod = "scale";
     }

     fixSrc = el.currentStyle.backgroundImage.split('\"')[1];
     el.className += " g-png-fixed";
    }
    el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + fixSrc + ", sizingMethod='" + sizingMethod + "')";
    el.fixedPNG = true;
   })(this):'')
  );
 }

* html .g-png-fixed {
 background-image: none !important;
}

Как подгружать "нестандартный" шрифт

Для конвертации шрифтов я пользуюсь http://onlinefontconverter.com.
Обычно для подгрузки шрифта необходимы форматы .svg (для iPad) .otf для других браузеров.

в css сначала определяем font-face:
@font-face {
font-family: 'GeosansLight';
src: url('GeosansLight.eot');
src: local('GeosansLight'), local('GeosansLight'), url('fonts/GeosansLight.svg') format('svg'), url('fonts/GeosansLight.otf') format('opentype');
}

Можно просто так:
@font-face {
font-family: 'GeosansLight';
src: url('fonts/GeosansLight.svg') format('svg'), url('../fonts/GeosansLight.otf') format('opentype');
}

h1{
font-family: GeosansLight;
}

"src: local" - если шрифт уже установлен на компьютере пользователя, то грузить его повторно не нужно. Вообще-то можно и не проверять, а грузить сразу.