Подключаем нестандартные шрифты. @Font-face для IE 9.

CSS3 позволяет легко и просто подключить нестандартный шрифт с помощью правила @font-face.
Вот так:

@font-face 

{
font-family: "MyFont"; /* Имя шрифта */
src: url(fonts/MyFont.ttf); /* Путь к файлу со шрифтом */
}
 P { font-family: MyFont; }

Для WebKit и Mozilla достаточно этого синтаксиса, но для совместимости с IE придётся повозиться.
Во-первых, IE не поддерживает шрифты в формате .ttf.
Для IE 6-8 версий нужен шрифт в формате .eot, для IE 9 нужен формат .woff.
Поэтому придется переконвертировать наш шрифт в два дополнительных формата, и наш код @font-face будет выглядеть вот так:

@font-face 

{
font-family: "MyFont";
src: url(fonts/MyFont.eot); /* for IE6-8 */
src: local("☺"), url(fonts/MyFont.ttf) format("truetype"), /* for Firefox 3, Safari */
url(fonts/MyFont.woff) format("woff"); /* for IE9 */ 

}

Обратите внимание на смайлик после local.
У меня в IE 9 не работал шрифт с любыми другими символами, кроме этого смайлика.
Подробно об этом чудо-смайлике можно прочесть здесь http://paulirish.com/2010/font-face-gotchas/#smiley

Есть еще одна проблема с woff шрифтом.
IIS 7 не знает такого типа файлов, для него нужно прописать вручную MIME-TYPE, причем тип я указала application/octet-stream , как и для файла .ttf.

Выводим javascript alert с серверной стороны asp.net

Иногда бывает нужно вывести в браузере стандартное окошко alert, но сделать это с серверной стороны, а не с клиентской.

Это очень просто. Например, так:

Response.Write("<script>alert('Your message');</script>");

Alert появится вместо страницы, по нажатию на Ok загрузится страница.

И еще один способ, используем ScriptManager:

ScriptManager.RegisterStartupScript(this, GetType(), "asyncscript", "alert('Your message');", true);

В данном случае загрузится страница, и на ней появится alert.

Попытка редактировать изображения на html5 canvas

Появилась задача редактировать фотографии online - изменять контраст, яркость, применять эффекты - сепия, черно/белый и прочие красивости. С моей любовью к яваскрипту я, конечно же, первым делом пошла искать решение на html5 canvas.

Самое достойное, что я нашла - библиотека Pixastic http://pixastic.com/ (там сейчас на сайте демо не работает. написала разработчику - сказал, что посмотрит, но за месяц так и не посмотрел) Быстро, удобно, реализовано достаточно эффектов, стабильно работает - рекомендую. Но, как обычно, я упёрлась в стену под названием IE :( С IE ниже 9 версии о таких серьезных задачах на html5 можно забыть, а для заказчика поддержка IE8 принципиально важна

Собственно, есть еще одна проблема - мне необходимо редактировать изображения в большом разрешении и с хорошим качеством: они потом используются в fullHD видео. В браузере результирующее изображение имеет размер того canvas, в котором оно расположено, т.е. небольшой области экрана. Можно, конечно, выводить картинку в скрытый через css огромный canvas, но страница будет тяжелой и тормозящей.

По сему было решено редактировать картинки на серверной стороне, с чем прекрасно справилась библиотечка AForge

IE 6 еще живой?

Обалдеть, неужели кто-то еще серьезно поддерживает IE 6?.. В комментариях к статье по css3 :nth-child селектору возмущаются, что это не работает в IE6. Удивлена. Как они вообще попали на эту статью, да и зачем?.. :)

Что использовать: Hiddenfield или Viewstate?

При необходимости сохранить какой-то параметр на странице между постбеками приходится выбирать, что для этого использовать - Hiddenfield или Viewstate.

Viewstate во многих случаях значительно увеличивает объем страницы, что делает ее медленной, например, если использовать Viewstate с Gridview. К тому же, Viewstate все равно помещается на странице в Hiddenfield :)

С точки зрения безопасности - данные во Viewstate уже закодированные, а свой собственный Hiddenfield нужно шифровать самостоятельно, если это необходимо.

С точки зрения разработки - работать с Viewstate проще: меньше строчек кода, соответственно легче отлаживать и проще будет другому разработчику работать с вашей страницей.

Ну и принципиальная разница - если нужно иметь доступ к полю клиентским скриптам, то берем Hiddenfield, потому что данные Viewstate для клиентских скриптов недоступны.

CSS3 непрозрачный элемент на прозрачном

CSS3 предлагает нам свойство opacity, которое позволяет задать элементу прозрачность. Всё бы хорошо, но все потомки элемента наследуют значение opacity родителя, и переопределить его никак нельзя.

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

Простенький пример

<div id="elementWrap">
<div class="transparent"></div>
<div class="notTransparent">
<span>Lorem ipsum dolor</span>
</div>
</div>

CSS

.transparent{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
background-color: #777777;
opacity: 0.7;
filter: alpha(opacity=70);
}

.notTransparent{
width: 400px;
height: auto;
top: 50%;
position: absolute;
z-index: 1001;
left: 50%;
background-color: #B5B5B5;
border-radius: 15px;
border: solid 3px #4F4F4F;
padding: 10px;
margin: 0 auto;
margin-top: -50px;
margin-left: -200px;
text-align: center;
}

В этом примере прозрачный блок при помощи z-index перекрывает собой всю страницу и таким образом блокирует доступ к всем элементам. Непрозрачный блок выводится поверх прозрачного (у него значение z-index больше).

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

JSON.stringify() для IE 7

Наш любимый IE7 не предоставляет метода JSON.stringify(). IE8 с JSON уже работает, а вот IE7 - никак нет. Со сторонними библиотеками я не работаю, поэтому все грабли приходится обходить вручную.

Нашла отличную статью о том, как победить IE7:
Cross-browser JSON Serialization in JavaScript

С точки зрения безопасности простенький JSON.parse() из этой статьи - не лучшее решение. Я в данный момент использую только JSON.stringify(), parse мне не нужен.

На случай, если оригинальная статья пропадет, копирую оттуда код для JSON.stringify() и JSON.parse().

var JSON = JSON || {};

// implement JSON.stringify serialization
JSON.stringify = JSON.stringify || function (obj) {
var t = typeof (obj);
if (t != "object" || obj === null) {
// simple data type
if (t == "string") obj = '"'+obj+'"';
return String(obj);
}
else {
// recurse array or object
var n, v, json = [], arr = (obj && obj.constructor == Array);
for (n in obj) {
v = obj[n]; t = typeof(v);
if (t == "string") v = '"'+v+'"';
else if (t == "object" && v !== null) v = JSON.stringify(v);
json.push((arr ? "" : '"' + n + '":') + String(v));
}
return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
}
};

// implement JSON.parse de-serialization
JSON.parse = JSON.parse || function (str) {
if (str === "") str = '""';
eval("var p=" + str + ";");
return p;
};