?

Log in

[Sass] Scout

Scout - кроссплатформенное GUI на основе Adobe Air, включающее Ruby, Compass, SASS.

Установка:

1. Adobe Air
2. Scout

Настройка:

1. Добавить приложение (+)
scout
2. Вкладка Configuration
a) Input Folder - откуда берем .scss
b) Output Folder - куда сохраняем .css
c) Config file - resources\sass\config.rb
d) JavaScripts and Images Folder - js и img
e) Environment - Development (с комментариями) и Production
f) Output style - можно выбрать сжатый вывод, полный, компактный или вложенный (nested).

Полезные ресурсы:
http://www.impressivewebs.com/sass-on-windows-with-scout-app/
http://www.coolwebmasters.com/education-and-learning/3508-30-amazing-resources-for-sass-lovers.html

Метки:

Мои твиты

Метки:

Список поддерживаемых шрифтов для совместимых браузеров
Браузер/ ПлатформаДоступные шрифты
Safari
  • American Typewriter
  • American Typewriter Condensed
  • Arial
  • Arial Rounded MT Bold
  • Courier New
  • Georgia
  • Helvetica
  • Marker Felt
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Zapfino
Android browser
  • Droid
Symbian/S60
  • S60 Sans
webOS
  • Arial
  • Coconut
  • Verdana
Ни один браузер, кроме Safari iOS, не поддерживает @font-face. М., но не рекомендуется воспользоваться Cufon и sIFR.
Таблица поддержки пользовательских шрифтов
Браузер/ ПлатформаsIFRCufón
SafariНетДа
Android browserНетДа
Symbian/S60ДаНет
webOSНетНет
BlackBerryНетНет
NetFrontВ зависимости от версии браузераНет
Openwave (Myriad)НетНет
Internet ExplorerНетНет
Motorola Internet BrowserНетНет
Opera MobileНетНет
Opera MiniНетНет

Метки:

Условия, операторы и медиа-функции можно найти в интернете

Определяем стили для iPhone (т.к. max ширина 480px, не поддерживает кроме screen остальные типы), скрываем от IE, т.к. с до 8 версии не понимает медиа-запросы:
<!--[if !IE]-->
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" />
<!--<![endif]-->

Для не iPhone (поддерживает хотя бы screen):
<link rel="stylesheet" media="screen and (min-device-width: 481px)" href="notiphone.css" />
Определяем ориентацию для версий позже iOS 3.2 +:
<link rel="stylesheet" media="all and (orientation:landscape)" href="land.css" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="port.css" />

Для iPhone 4 и 5 м. задать отдельное правило:
<link rel="stylesheet" media="-webkit-min-device-pixel-ratio: 2" href="iphone4+.css" />

Таблица поддержки CSS media queries

Браузер/ ПлатформаПоддержка условий media queriesПоддержка orientation
SafariДаДа, с OS 3.2
браузер AndroidДаДа, с 2.0
Symbian/S60Да с 5-го выпуска
Нет до 5-го выпуска
Нет
Nokia Series 40Да, с 6-го выпуска
Нет, до 6-го выпуска
Нет
webOSДаНет
BlackBerryНетНет
NetFrontНетНет
Openwave (Myriad)НетНет
Internet ExplorerНетНет
Motorola Internet BrowserНетНет
Opera MobileДаНет
Opera MiniДаНет

Метки:

1. Обрамляем в <form> c атрибутами action и method.
2. В некоторых моб браузерах есть лимит на длинну передаваемой строки, учитываем при передачи методом GET
3. Обязательно используем <label>, особенно для сенсорных экранов. Позволяет тыкать на любое место текста
4. accesskey = 'a' позволяет задать клавишу доступа с клавиатуры
5. <field> - секция, <legend> -название секции
6. <select> - список выбора
    атрибут size - задает высоту списка,
    атрибут multiple = "multiple" - множественный выбор
   <optgroup label="Belarus"><option ... - позволяет задать label группе списка

Таблица поддержки select
Браузер/ Платформаselectselect с атрибутом sizeselect с атрибутом multipleoptgroup
Safariselect в половину высотыНикакой разницыДаДа
браузер AndroidМодальное выпадающее окошкоНикакой разницыДаДа
Symbian/S60Выпадающее окошко с поискомДаДаДа
Nokia Series 40Открывает отдельное окноНикакой разницы до 6-го выпускаДаДа, показывает options сгрупированные в папки
webOSМодальное выпадающее окошкоДаДаДа
BlackBerryВыпадающий списокДаДаДа с версии 3.8
NetFrontВыпадающий списокДаДаДа
Openwave (Myriad)Выпадающий списокДаДаТолько как разделитель, без атрибута label
Internet ExplorerВыпадающий списокДаДаНет
Motorola Internet BrowserПоказывает полный списокДаДаДа
Opera MobileВыпадающий списокДаДаДа
Opera MiniВыпадающий списокДаДаНет
7. Не рекомендуется делать на странице более 4 переключателей, лучше воспользоваться списками.
8. тег <button> совместим не со всеми устройствами

Метки:

Таблица поддержки голосовых вызовов
Браузер/ ПлатформаПоддержка tel:Поддержка WTAI
SafariДаНет
браузер AndroidДаДа
Symbian/S60ДаДа
Nokia Series 40ДаДа
webOSДаНет
BlackBerryДаДа
NetFrontДа, для звонков и добавления в менеджер контактов
Openwave (Myriad)ДаДа
Internet ExplorerДа, для звонков, SMS, и добавления в менеджер контактов
Motorola Internet BrowserДа, для звонков, SMS, и добавления в менеджер контактов
Opera MobileДаДа
Opera MiniДа (кроме устройств Java MIDP 1.0)Да (кроме устройств Java MIDP 1.0)
В iPod Touch  нет возможности голосового вызова. Вместо этого пользователь получает подсказку добавить номер в телефонную книгу при помощи ссылки tel:.
Возможность телефонного вызова по ссылке есть не во всех мобильных телефонах:
<a href="tel:+1800229933">Call us free!</a>
Есть возможность DTMF-тона через параметр postd: <a href="tel:+1800229933;postd=4">Call us free!</a>
Cтандарт WTAI позволяет:
- сделать звонок через функцию вызова "wp" и функции "mc" (make call): <a href="://wp/mc;+1800229933">Call us free!</a>
- добавить контакт в телефонную книгу через "ap" (add to phonebook): <a href="wtai://wp/ap;+3454561111;White%20House">Add to contacts</a>

Метки:

Пиктограмма - это знак, изображающий объект в схематическом виде.

Emoji - японская разработка, состоящая из перечня иконок, которые браузер нарисует сам. Браузер может отобразить иконку, если в нём поддерживается данная технология. Для отображения файл д.б. сохранен как Shift-JI или определять, как стандартные символы Unicode (&#xYYYY). Доступные пиктограммы - http://www.mobilexweb.com/go/pictograms. iPhone и поддерживает эти иконки с версии 2.2 iOS (http://www.mobilexweb.com/go/emoji-iphone). Сетевые ресурсы не используются.

Пример для iPhone (в конце б. изображен смайлик): <p>Thanks for your message! &#xe415;<p>

Через <object> OMA стандартизировал пиктограммы в XHTML MP:
<object data="pict:///time/season/summer">
<object data="pict://weather/sunny">
<img src="images/sun.png" width="32" height="32" alt="Sunny" />
</object>
</object>

Хороший ресурс по пиктограммам и Emoji: http://sites.google.com/site/unicodesymbols/Home/emoji-symbols.

Таблица совместимости пиктограмм
Браузер/ ПлатформаПиктограммы OMAПиктограммы Emoji
SafariНет (выдает окно сообщений с ошибкой)Да
браузер AndroidНет (выдает большое сообщение об ошибке)Нет (ничего не показывает)
Symbian/S60Нет (ничего не показывает)Нет (ничего не показывает)
Nokia Series 40Нет (показывает символ X)Нет (показывает квадрат)
webOSНет (ничего не показывает)Нет (показывает квадрат)
BlackBerryДа до версии 4.6
Нет после версии 4.6
Нет (ничего не показывает или показыванет квадрат)
NetFrontДаНет (ничего не показывает)
Openwave (Myriad)ДаNo (ничего не показывает или показыванет иероглиф)
Internet ExplorerНет (ничего не показывает)Нет (показывает квадрат)
Motorola Internet BrowserДаНет (показывает квадрат)
Opera MobileНет (ничего не показывает)Нет (ничего не показывает)
Opera MiniНет (ничего не показывает)Нет (ничего не показывает)
Источники: Programming the Mobile Web, by Maximiliano Firtman, Second Edition October 2012

Метки:

1. <img> исп-ть для лого, фотов статьях, карт

2. обязательны атрибуты src, alt, width, height ( сокращает первичный рендеринг, т.к. браузеру не нужно ждать загрузки изо, чтобы вычислить размер)

3. понимаемые форматы: gif, jpeg, png

4. рекомендуемый формат:

png –открытая технология + обязательный формат для Java ME,

gif – для анимации и баннеров

5. Альтернативы изо: SVG, HTML5 <canvas>, data URL (base64).
6. Иконки, кнопки и фоны отображать через CSS

Таблица совместимости форматов изображений

Браузер/ Платформа

PNG 8 bits index transparency

PNG 8 bits alpha transparency

Анимированный GIF

Data URI

Safari

Да

Да

Да

Да

браузер Android

Да

Да

Нет

Да

Symbian/S60

Да

Да

Да (иногда останавливается в 5th edition)

Да

Nokia Series 40

Да

Да

Да

Нет

webOS

Да

Да

Да с версии 1.4

Да

BlackBerry

Да

Да

Да с версии 3.8

Да, на старых устройствах не валидна запись в CSS

NetFront

Да

Да

Да

Да

Openwave (Myriad)

Да

Да

Да

Нет

Internet Explorer

Да

Да

Да

Нет

Motorola Internet Browser

Нет на старых устройствах (серии v3)
Да на более новых устройствах

Да

Нет

Opera Mobile

Да

Да

Да

Да

Opera Mini

Да

Да

Нет

Да

Data:URL - это схема, позволяющая включить  небольшие элементы в строку url.
IE7 не поддерживает data: URL.

Для изо исп-ся формат base64, к-ый увеличивает размер изо на 33% (но при передачи с сервера в gzip можно уменьшить). М.б. исп-на в css с кэшированием.

Синтаксис: data:[<MIME-type>][;charset=<encoding>][;base64],<data>

Примеры:

HTML


<img
src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7" width="20px" height="20px" alt="Larry" />

CSS
#logo {
    width: 20px;
    heigth: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
        ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeN
        Ge4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC) top left no-repeat;
}

javascript
window.open('data:text/html;charset=utf-8,%3C!DOCTYPE%20HTML%20PUBLIC%20%22-' +
    '%2F%2FW3C%2F%2FDTD%20HTML%204.0%2F%2FEN%22%3E%0D%0A%3Chtml%20lang%3D%22en' +
    '%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhea' +
    'd%3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E' +
    '%0D%0A', '_blank', 'height=20, width=20');
PHP
$str = base64_encode(file_get_content($path));

Таблица совместимости форматов изображений
Браузер/ ПлатформаSVG в браузереSVG анимация
SafariДа с версии 2.1, поддерживается в object и в imgДа
браузер AndroidНетНет
Symbian/S60Да с 3-го выпуска, поддерживается в objectДа
Nokia Series 40НетНет
webOSНетНет
BlackBerryНетНет
NetFrontДаДа
Openwave (Myriad)НетНет
Internet ExplorerНетНет
Motorola Internet BrowserНетНет
Opera MobileНетНет
Opera MiniДа, поддерживается в object и в imgНет

Метки: