Новые возможности CSS3

Конец эры интенсивного использования CSS2.1 не за горами. Вскоре CSS дизайнеры позабудут о проблемах верстки в IE6, перестанут вырезать картинки чтобы создать блоки с закругленными уголками, задавать float:left блочным элементам дабы те выстроились в нужное количество колонок и ложить два background'а на разные элементы когда так хочется установить их на один. Совсем чуть-чуть и мы наконец сможем задействовать всю мощь CSS3 так как нам этого захочется.

Сейчас современные браузеры такие как Opera 9.63, Mozilla 3.06 и Internet Explorer 6 :) активно внедряют CSS3. Конечно понимают они не все нововведенные свойста. Вот например случай с закругленными углами:

border-radius:10px;  /*одно свойство и кругые углы в 10 пикселей готовы*/

...к сожаление такое нигде не работает. Mozilla использует свой прием. Добавляет приставку -moz- почти ко всем свойствам CSS3 и все начинает работать. Safari добавляет приставку -webkit-.

Уверен, что в новых браузерах таких как Opera 10, Mozilla 3.1 и IE8 все будет хорошо

Немного подкрепления от CSS3

Наверное уже многие знакомы с возможностями CSS3, но все же скажу пару слов от себя.

• Очень понравилась возможность устанавливать несколько фоновых рисунков на элемент, это очень упрощает жизнь хотябы с теми же закругленными краями. Хотя сразу вспоминаешь, что это уже не проблема.

  background: url(body-bottom.gif) bottom left no-repeat,
  url(body-middle.gif) left repeat-y;

• Возможность установить рисунок на border (Safari, Firefox 3.1 alpha)

  border-top-image:url("image.png");

  .
• Очень классная вещь с добавлением падающей тени от текста(Opera 9.5+):

  text-shadow:10px 5px yellow;

  
• Мультиколоночный лейаут с помощью всего нескольких свойств:

  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -moz-column-rule: 1px solid black;

  
• Закругленные углы (round corners) теперь под силу всем:

  -moz-border-radius:0 15px 0 15px;

  

Это конечно же только малая часть возможностей CSS3 и перечеслять их можно еще долго. Нам остается только ждать новых версий браузеров, а пока справляемся как можем :).

Кроссбраузерный XmlHttpRequest (xhr)

Сегодня немного отдалимся от CSS и HTML и перейдем к Javascript. Речь пойдет о XmlHttpRequest.

XmlHttpRequest - это апи для пересылки различных данных между браузером и веб-сервером по Http-протоколу. Вообщем вы можете слать запрос на удаленный сервер не перегружая страницу. Очень удобная вещь.

Работая над одним проектом, я столкнулся с проблемой кроссбраузерности при использовании XHR.. как Вы думаете о чем это я? Конечно же о полюбившимся мною IE6 :). С ним всегда все наперекосяк. Вот я и решил написать свою реализацию XmlHttpRequest, точнее описать что-то вроде класса который бы все делал сам, был бы легок в эксплуатации.

И так представляю вашему вниманию функцию создающую кроссбраузерный XmlHttpRequest:

function Xhr(options) {
  this.method = 'post';
  this.onSuccess = function() {
  };
  this.onFailure = function() {
  };

  if (options) {
      for (var o in options)
          this[o] = options[o];
  }
  if (window.XMLHttpRequest) this.request = new XMLHttpRequest();
      else if (window.ActiveXObject) this.request = new ActiveXObject("Microsoft.XMLHTTP");

  this.onreadystatechange = function() {
      if (this.request.readyState == 4)
          if (this.request.status == 200) {
              this.onSuccess(this.request.responseXML, this.request.responseText);
          }
          else this.onFailure();
  };

  var xhr = this;
  this.request.onreadystatechange = function() {
      xhr.onreadystatechange();
  };

  this.send = function(url, data) {
      this.request.open(this.method, url, true);
      if (this.method == 'post') {
          this.request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
          this.request.setRequestHeader('Content-length', data.length);
      }
      this.request.send(data);
  };
}

Теперь мне стоит немного рассказать об этом коде. И так Вы видите функцию, которой на вход передаются параметры (опции), относительно которых и будет строиться наш XHR. Пойдем по порядку

• method - метод передачи данных, может быть POST или GET.
• onSuccess - это функция которая будет выполняться при удачном выполнении запроса.
• onFailure - функция которая будет выполняться при возникновении ошибки(можно выводить какое-то сообщение).

Ну вот все нужные параметры переданы, а дальше идет проверка на ActiveX. Если таковые компоненты присутствуют значит это никто иной как Internet Explorer 6.

Теперь небольшой примерчик использования.

Допустим у Вас есть текстовое поле(textarea) в котором люди пишут свои комментарии.

<textarea rows='5' cols='100' name='comment' id='comment'></textarea>
<input type='button' name='send' value='Отослать' onclick='send();'/>

Наша задача принять значение текстового поля и передать их на сервер не перегружая страницу. Создадим функцию которую сможем поместить в виде события(event) на нашу кнопку отправки.

function send() {
    var xhr = new Xhr({
        method:'post',
        onSuccess:function() { alert('Спасибо за комментарий'); },
        onFailure:function() { alert('Произошла ошибка!!!'); }
    });
    var commentValue = document.getElementById('comment').value;
    xhr.send('/commented', 'commentText=' + commentValue);
}

Метод send у XHR шлет запрос на сервер по урлу '/commented' и передает параметр 'commentText' - это текст комментария. А на сервере мы просто получаем параметры и используем их в своих целях.

Хух! Вот и все. Напомню, что этот XmlHttpRequest работает во всех браузерах. Удачного использования.