Есть мелочи, без которых кодеру жить просто нельзя, их нужно знать, ведь пользоваться или приходиться каждый день.

Мелочь 1. Центрирование по горизонтали.
Тег <center> уже давно не декомендуется использовать, но что есть взамен?
Внутри <div> содержимое можно центрировать с помощью text-align: center, при чем центрироваться будет не только текст.

div{

text-align: center;

}

Предположим, у нас есть <div> шириной 200px и его нужно поставить по центру.
Для этого нужно в css:

div{
margin-left: auto;
margin-right: auto;
dispaly: ?
}


Пример
Мелочь 2. Центрирование по вертикали.




Еще что-то было с позишн рилейтив в ие в тестовом задании яндекса, потом как расагивать контент по вертикали когда рядом картинка, про оверфлов хидден






Затем написать как "скинить видеи плеей" и про фулскрин не забыть , смотреть примеры в агнитио, и про жесты и события в айпед

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" - если шрифт уже установлен на компьютере пользователя, то грузить его повторно не нужно. Вообще-то можно и не проверять, а грузить сразу.

Apple Touch Gestures :)

Как запустить сайт с полнооконном режиме, так чтобы оно выглядело как iPhone приложение

Выглядет очень эффектно, когда вы можете запустить сайт, просто нажав на иконку на экране iPhone/iPad без панелей Safari.

Делается это очень просто:
1. Вставляем в HTML страницу

    <meta name="apple-mobile-web-app-capable" content="yes" />

2. Открываем Safari, заходим на сайт

3. Нажимаем на плюсик(+) в нижней панели Safari -> add to home screen

На экране рядом с другими иконками появится маленький скриншотик сайта в классичейкой айфоновской кнопочной обертке, нажав на которую получаем свой сайт с полнооконном режиме

Drag and Drop в iPhone/iPad

Drag and Drop сама по себе непростая задача, не говоря уже о том, чтобы реализовывать ее для iPhone/iPad. Так почему бы не упростить себе жизнь используя Drag Drop библиотеку от gotProject?


Синтаксис:
Назначаем элемент который будет таскать:

var D = new webkit_draggable('id_of_element', {options});

Убираем "таскабельность":

D.destroy();

События:
onStart,onEnd

Кроме того, можно "цеплять" другой элемент к тому, который уже таскается (handle),
возвращать на место таскаемый элемент (revert: true),
отслеживать пересечение элементов (onOver, onOut)




СКАЧАТЬ БИБЛИОТЕКУ

Видео на работает на iPhone/iPad. Что делать ?

Легким движением руки запихнув <VIDEO> в html страницу, и проверив работающее видео в Safari на своем ноутбуке, радостно идем пить кофе.

Но тут подходит шеф и говорит, что на iPad вместо видео он видит только большой черный квадрат.

Для того, чтобы шеф не мешал пить кофе, нужно сделать видео для iPhone/iPad - проще и быстрее всего сделать его с помощью iTunes.

1. Загружаем видео в iTunes ( File -> Add to Library )

2. Ищем наше видео в закладке Movies.

3. В верхнем меню ищем Advanced -> Create iPod/iPhone Version.

Вариант 2.
Лично я ненавижу iTunes, тупая и медленная софтина. Для перекодировки я использую супер програмку, которая вполне заслуженно так и называется  - SUPER.
iPad поддерживает видео в форматах .m4v, .mp4 и .mov, кодированное в стандарте H.264.
Открываем конвертор, выбираем тип контейнера mp4, затем выбираем видео кодек H.264. Добавляем в очередь файлы на декодирование, и в общем то все.

Как делать скриншоты на iPhone/iPad

1. Нажимаем и придерживаем верхнюю кнопку и одновременно нажимаем центральную большую мегакнопку.

2. Щелк - скриншот ищем в папке c фотографиями.

Как включть консоль в Safari? (iPhone/iPad)

Консоль, предложенная разработчикам компанией Аррle откровенно говеная. Все, что можно сделать в этом кастрированном инструменте - выводить сообщения и отслеживать ошибки. Выполнять код и работать с DOM не получится. Но включить ее все равно нужно.



Для этого:
1. Заходим в "Settings" -> Safari -> Developer
2. Включаем Debug Console (on)




iPad - это просто большой iPhone. В iPad включается так же.