Блог Сергея Байдачного

Мой блог о технологиях

Archive for the ‘Internet Explorer 9’ Category

«Почему не работает гребаный border-radius» или Накипело.

4 комментария

 

Коллеги, хочу сразу отметить, что все примеры в своих статьях я пишу лично. Согласен, что выглядят они туповато, но вставлять кусок кода в статью, не проверив его… Картинки я также НЕ рисую в Paint.

К чему это я. Ах да, некоторое время назад писал пост о возможности работы с border-radius. Как ни странно, Internet Explorer 9 единственный браузер, который правильно работает с данными атрибутами. Если же говорить об IE 10, то мы обогнали всех. Достаточно посмотреть на результаты тестов: http://samples.msdn.microsoft.com/ietestcenter/. Как видно, основные конкуренты остались позади. Но я более чем уверен, что они догонят IE 10 в самое ближайшее время, а, следовательно, эра HTML 5 началась. И это очень здорово! Хотя и удивляет то, что конкуренты особо и не чухались, до появления поддержки HTML 5 в IE. Ведь декларация поддержки HTML 5 идет не первый год, а кроме video элемента толком ничего и не было.

Я опять отвлекся от темы. Так вот, прошло уже около года с момента публикации моего поста, а я до сих пор получаю гневные сообщения о том, что не работает border-radius в IE 9. Это конечно не так. Просто нужно быть внимательнее к тому коду, который Вы пишите. Если у меня что-то не получается, то я первым делом ругаю себя, а потом кого-то еще. Обычно нахожу ошибку именно у себя.

Что касается border-radius, то основная ошибка, которая тут возникает, это запуск страницы в режиме совместимости:

1). Проверьте, что страница декларирует использование HTML 5 с помощью элемента <DOCTYPE html>. В противном случае контент будет рассматриваться как HTML 4.x, а, следовательно, border-radius работать не будет;

2). Проверьте meta элементы на Вашей странице. Не переводят ли они браузер в режим совместимости? Возможно, Вы сами включили режим совместимости при тестировании других возможностей, нажав соответствующую кнопку возле строки-адреса страницы.

Иными словами, Internet Explorer позволяет отображать не только сайты, использующие все самые последние рекомендации, но и поддерживает ряд режимов совместимости, в которые можно принудительно переводить Ваши сайты, не модифицируя код.

Изучите предметную область, а потом делайте выводы.

А я начну писать статьи по HTML 5. Самое время.

Written by Sergiy Baydachnyy

06.09.2011 at 17:50

Опубликовано в Internet Explorer 9

Tagged with

Толерантность в WordPress

leave a comment »

Только что сломался WordPress (или я довел свою машину до такого состояния). Выдает сообщение о том, что мой браузер устарел (для любых браузеров). Но радует то, что WordPress максимально лоялен к пользователю и предлагает обновить уже установленный (используемый в данный момент) на машине браузер, а не предлагает мне какое-то Г… или что-то в этом роде.

Вот:

clip_image002

или

clip_image004

И т. д.

Written by Sergiy Baydachnyy

30.08.2011 at 22:11

Опубликовано в Internet Explorer 10, Internet Explorer 9

Tagged with

Зарисовки по JavaScript для .NET разработчиков: Конструкторы и наследование

2 комментария

В этой статье мне хотелось бы освятить различные варианты наследования в JavaScript. Но прежде чем сделать это, давайте рассмотрим некоторые особенности, которые доступны в функциях-конструкторах, чтобы закрыть вопросы, связанные с созданием объектов.

Первое, на чем мне хотелось бы остановиться, это возвращаемое значение функции-конструктора. В языке С# и других, конструкторы не имеют возвращаемого значения и, создавая объект некоторого типа, Вы всегда получаете желаемое. В JavaScript функции-конструкторы, напротив, возвращают значение. В обычном случае это ссылка this, ссылающаяся на созданный объект. Последняя генерируется в начале работы конструктора и возвращается неявно (хотя можно вернуть и явно), но, если Вы решили изменить тип возвращаемого объекта, то это легко сделать, создав внутри что-то другое и вернуть объект, используя оператор return. Вот небольшой пример:

 

   1:  function Employee() {
   2:  return new Person();
   3:  }
   4:   
   5:  function Person() {
   6:  this.firstName = "Sergiy";
   7:  this.lastName = "Baydachnyy";
   8:  };
   9:   
  10:  var obj = new Employee();
  11:   
  12:  alert(obj.firstName);

 

Используя эту возможность, можно реализовать обработку ошибки, которая возникнет, если программист вызовет функцию-конструктор как обычную функцию (то есть без оператора new):

 

   1:  function Person() {
   2:  if (!(this instanceof Person)) {
   3:     return new Person();
   4:  }
   5:  this.firstName = "Sergiy";
   6:  this.lastName = "Baydachnyy";
   7:  }
   8:   
   9:  var obj = Person();
  10:   
  11:  alert(obj.firstName);

 

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

Вызов конструктора базового класса.

Мой любимый способ наследования, это вызов конструктора «базового класса» в конструкторе «производного класса». Иными словами, создавай объект с помощью функции-конструктора, Вы инициируете вызов другой (других) функции-конструктора, передавая текущий контекст. При этом инициализация последней выполняется без использования оператора new (так как он создает новый контекст), а прямым вызовом функции. В этом случае, создаваемый объект получает все данные и методы, объявленные в вызываемой функции-конструкторе. Посмотрим на примере:

 

   1:  function Person(fName, lName) {
   2:  this.firstName = fName;
   3:  this.lastName = lName;
   4:  this.Name = (function () { return this.firstName + " " + this.lastName });
   5:  }
   6:   
   7:  function Developer(fName, lName, lang) {
   8:  Person.call(this,fName, lName);
   9:  this.language = lang;
  10:  }
  11:   
  12:  var d = new Developer("Sergiy", "Baydachnyy", "C#");
  13:   
  14:  alert(d.Name());

 

Из кода видно, что мы используем метод call для установки контекста функции-конструктору. Аналогично можно было бы использовать и метод apply. Данный подход мне нравится тем, что позволяет получить все свойства и методы наследуемого объекта, с возможностью их вызова внутри самого конструктора.

Между тем у этого подхода есть несколько недостатков:

· Методы, которые объявляются в прототипах, никоим образом не попадают в производный объект. Иными словами в производный объект попадает все, что объявлено с помощью this;

· Определить связь с наследуемым объектом нет никакой возможности. Иными словами instanceof полностью работать не будет;

· Поскольку методы в JavaScript также являются объектами и занимают какую-то память, то эффективнее использовать ссылку на метод вместо его дублирования.

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

Использование прототипа.

Метод, основанный на использовании прототипов, состоит в том, что в свойство prototype производного объекта устанавливается ссылка на базовый объект (созданный с помощью new). В этом случае производный объект получает доступ ко всем полям базового объекта. При этом цепочка наследований может быть сколь угодно длинной.

 

   1:  function Person(fName, lName) {
   2:  this.firstName = fName;
   3:  this.lastName = lName;
   4:  this.Name = (function () { return this.firstName + " " + this.lastName });
   5:  }
   6:   
   7:  function Developer(lang, fName, lName) {
   8:  this.language = lang;
   9:  this.firstName = fName;
  10:  this.lastName = lName;
  11:  this.constructor = Developer;
  12:  }
  13:   
  14:  Developer.prototype = new Person();
  15:  var d = new Developer("C#", "Sergiy", "Baydachnyy");
  16:   
  17:  alert(d.Name());

 

Обратите внимание, что этот код не только устанавливает свойство prototype, но и изменяет свойство constructor, которое меняется по ходу установки prototype.

Этот подход также обладает рядом недостатков:

· Установку прототипа нужно выполнять вне функции-конструктора. Это означает, что мы не сможем воспользоваться методами базового объекта внутри конструктора производного;

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

· Изменение прототипа скажется на всех объектах, включая производные;

· Код по конструированию объекта разбит на отдельные части в разных областях приложения, что меня, как ООП разработчика очень пугает;

Комбинация двух методов.

Часто, чтобы перенести данные и методы базового объекта в производный, сохранив при этом цепочку прототипов, прибегают к комбинации обоих методов. То есть, в конструкторе производного объекта вызывают функцию-конструктор базового (в текущем контексте), а далее устанавливают прототипы. Подобный подход нас практически избавляет от недостатков первого метода, но недостатки второго метода реализации наследования, остаются.

Наследование в ECMA Script 5

Существует еще один механизм наследования, о котором я не говорил, это наследование через прототип. В этом случае мы прототипу одного объекта присваиваем прототип другого объекта (иногда через создание промежуточной функции с пустым прототипом). А затем расширяем объект по своему усмотрению.

Мне этот метод не особо нравится, так как он также не позволяет красиво группировать код. В тоже время он существует и ECMA Script 5 определяет специальный метод у Object, который создает объект наследник через прототип:

 

   1:  function Person(fName, lName) {
   2:  this.firstName = fName;
   3:  this.lastName = lName;
   4:  Person.prototype.Name = (function () { return this.firstName + " " + this.lastName });
   5:  }
   6:   
   7:  var s = Object.create(new Person("Sergiy", "Baydachnyy"));
   8:   
   9:  //теперь можно расширять созданный объект

 

В завершении отмечу, что «тупое» копирование ссылок на методы базового объекта также является вариантом наследования. В зависимости от задачи, Вы легко можете комбинировать различные методы.

Вот, например, интересный код, который мне пришел в голову:

 

   1:  function Person(fName, lName) {
   2:  this.firstName = fName;
   3:  this.lastName = lName;
   4:  Person.prototype.Name = (function () { return this.firstName + " " + this.lastName });
   5:  }
   6:   
   7:  function Developer(lang, fName, lName) {
   8:   
   9:  function IDeveloper() {
  10:  }
  11:   
  12:  IDeveloper.prototype = new Person(fName,lName);
  13:  var that = new IDeveloper();
  14:  that.language = lang;
  15:  that.constructor = Developer;
  16:  return that;
  17:  }
  18:   
  19:  var d = new Developer("C#", "Sergiy", "Baydachnyy");

 

Этот код характерен тем, что не позволяет расширять прототипы за пределами конструктора, так как каждый раз создается новый объект типа IDeveloper, но с точки зрения ООП выглядит интересно. Наверняка его можно и улучшить.

Written by Sergiy Baydachnyy

29.08.2011 at 18:24

Опубликовано в Internet Explorer 10, Internet Explorer 9, JavaScript

Tagged with

Зарисовки по JavaScript для .NET разработчиков: Любовь к JSON

with one comment

Не знаю как Вам, но мне приходилось писать множество веб-служб для внутреннего использования другими частями приложения. И всегда, когда приходилось принимать решение о том, в каком виде возвращать данные, я выбирал XML. Что может быть лучше супер-универсального протокола SOAP, получившего значительное расширения в WCF? И что может быть проще сериализации и десериализации на основе XML в .NET Framework?

Вот только нужна ли универсальность SOAP и избыточность XML при реализации внутренних служб. Ведь формат передаваемых данных четко специфицирован. Кроме того, что делать разработчику, который программирует клиент, используя JavaScript. Конечно, можно предложить ему набор оберток (сгенерированных внешней утилитой), выполняющих черновую работу или заставить писать клиент только на ASP.NET и использовать ScriptManager. Но есть и другой вариант, состоящий в поддержке Вашими службами протокола JSON.

Ранее, читая о поддержке JSON в ASP.NET или Bing службах, я не придавал этому особого значения, но когда я начал писать приложения на JavaScript, то тут же потерял желание обрабатывать XML.

Прежде чем перейти к описанию работы с JSON, посмотрим на еще один способ создания объекта в JavaScript, это литералы. Вот пример создания небольшого объекта:

 

   1:  var obj1 = {
   2:   
   3:  firstName: "Sergey",
   4:  lastName: "Baydachnyy",
   5:   
   6:  Name: (function () {
   7:  return this.firstName + " " + this.lastName;
   8:  })
   9:   
  10:  };
  11:   
  12:  alert(obj1.Name());

 

Тут мы добавили два поля с данными и один метод. Естественно, что сейчас нас интересуют только данные, но так Вы получите более полное представление о JavaScript. Создав объект таким образом, Вы можете без труда добавлять свойства и методы к этому объекту в любом месте когда (как я писал в первой статье).

Из кода видно, что литерал позволяет создавать объект с помощью литерала в формате имя поля : значение. А вот теперь вернемся к JSON или к JavaScript Object Notation. Уже по одному названию понятно, что данные с помощью JSON передаются в аналогичном формате и практически готовы для создания объекта. «Практически» вкралось не случайно, так как данные могут содержать дополнительную мета информацию и множество лишних кавычек (в формате JSON имя также заключается в кавычки, что не обязательно для литерала).

Чтобы подготовить данные к преобразованию в объект, достаточно использовать специальный объект JSON, содержащий два метода: parse и stringify. Первый метод преобразует JSON данные в объект, а второй – наоборот:

 

   1:  var jsonData = 
   2:     '{"firstName":"Sergiy","lastName":"Baydachnyy"}';
   3:   
   4:  var obj1 = JSON.parse(jsonData);
   5:   
   6:  alert(obj1.firstName);

 

Таким образом, обрабатывать JSON данные в JavaScript достаточно просто. Что касается объекта JSON, то сегодня он поддерживается всеми браузерами, включая Internet Explorer 9, поэтому различные альтернативы уже можно и не использовать (в сети есть масса примеров с eval и др. – не все они сейчас актуальны).

Written by Sergiy Baydachnyy

26.08.2011 at 16:57

Internet Explorer 9: двумерные преобразования

2 комментария

Последнее нововведение в Internet Explorer 9 (и пойду спать), это двумерные преобразования. Речь идет о простых 2D преобразованиях, описанных тут (http://www.w3.org/TR/css3-2d-transforms/). Фактически в CSS появляется возможность использовать два дополнительных атрибута, это transform и transform-origin. Правда в Internet Explorer 9 эти атрибуты носят другие названия, это –ms-transform и –ms-transform-origin. Причина такого извращения мне непонятна. Видимо драфт документа планируют серьезно изменить, при этом очень хотелось побить тех, кто кричал, что в IE 9 нет трансформации (кстати, другие браузеры реализуют подобные атрибуты со своими названиями).

Итак,

–ms-transform-origin задает точку, относительно которой будет происходить трансформация объекта. Как ни странно, но по умолчанию это центр объекта. При этом, можно указывать как абсолютное значение (в пикселях), так и относительное – в процентах.

-ms-transform задает саму трансформацию. Тут могут быть использованы следующие функции, которые записываются через пробел в одну строку:

  • matrix
  • translate (или translateX, translateY)
  • rotate
  • scale (или scaleX, scaleY)
  • skew (или skewX, skewY)

Все эти функции достаточно известные и принимают в качестве параметров одно или два значения.

Ниже пример небольшой трансформации для элемента div.

   1:  <!DOCTYPE html>
   2:   
   3:  <html lang="en">
   4:      <head>
   5:          <meta charset="utf-8" />
   6:          <title></title>
   7:          <style>
   8:    div {
   9:        height: 100px; width: 100px;
  10:        background:yellow;
  11:        -ms-transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
  12:    }          
  13:          </style>
  14:      </head>
  15:      <body>
  16:         <div>hello</div> 
  17:      </body>
  18:  </html>

 

На экране можно будет увидеть следующую картину:

image

Естественно, что более значимых эффектов можно добиться, комбинирую трансформацию и javascript.

Written by Sergiy Baydachnyy

13.02.2011 at 23:34

Опубликовано в Internet Explorer 9

Tagged with

Internet Explorer 9: Geolocation

with one comment

И еще одно нововведение стало доступно в Internet Explorer 9, это определение местоположения пользователя. Уж не знаю, почему разработчики хотели эту возможность (я регулярно получал вопрос о данной фиче во время наших событий), но теперь Internet Explorer 9, используя ваше IP (и, возможно, информацию из сети WiFi), сможет определить Ваше местоположение, используя специальную службу от Microsoft.

С точки зрения пользователя, все выглядит достаточно безопасно. Как только веб-приложение пытается определить местоположение, пользователь получает нотификацию об этом:

image

Пользователь может как разрешить доступ к информации (единожды или всегда), так и запретить.

С точки зрения разработчика, все сводится к вызову метода navigator.geolocation.watchPosition(), который может принимать два параметра:

  • ссылку на метод, который вызывается в случае ошибки. Тут могут быть обработаны ситуации, когда пользователь запретил доступ к информации о местоположении или позиция не может быть найдена по каким-то причинам;
  • ссылка на метод, который вызывается после определения позиции. Этому методу передается параметры, который и будет содержать искомую позицию пользователя в виде геокоординаты.

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

Судя по моему месторасположению, я сейчас нахожусь в каком-то парке. На улице сейчас –12, поэтому осталось мне не долгоSmile Хотя, если серьезно, погрешность составила пару кварталов, что очень даже неплохо для такого неточного метода нахождения позиции, как IP.

image

Written by Sergiy Baydachnyy

13.02.2011 at 22:02

Опубликовано в Internet Explorer 9

Tagged with

Internet Explorer 9: семантические элементы

leave a comment »

Ранее я писал, что Internet Explorer 9 не поддерживает семантические элементы, описанные в HTML 5. Но, хорошо поработав над вопросами производительности и реализацией CSS 3, разработчики успели включить в релиз и семантические элементы.

Семантические элементы позволяют разбивать содержимое на отдельные блоки, подобно тому, как это делает элемент div. Но, в отличии от элемента div, они позволяют дать однозначную характеристику тому или иному блоку html кода. Например, элемент header определяет верхний заголовок для содержимого, а элемент footer – нижний.

Ниже приведен список семантических элементов, который поддерживается в Internet Explorer 9 RC:

  • section – позволяет разбивать содержимое на отдельные группы
  • nav – определяет блок с навигацией
  • article – определяет основное содержимое на странице
  • aside – позволяет выделить содержимое, которое имеет отношение к основному содержимому страницы, но не является его частью (бред какой-то написал, проще говоря – сноски)
  • hgroup – используется для группировки элементов типа h1,…
  • header – задает верхний заголовок
  • footer – задает нижний заголовок
  • figure – определяет изображение
  • figcaption – заголовок к изображению
  • mark – выделить небольшой блок содержимого (например, для важности)

Естественно, что ко всем этим элементам можно применять стили, а значит более гибко управлять представлением содержимого на странице. Наконец, предполагается, что использование семантических элементов, позволит поисковым машинам выполнять разбор страницы более “осмысленно”.

Written by Sergiy Baydachnyy

13.02.2011 at 21:37

Опубликовано в Internet Explorer 9

Tagged with