Opera 11

1. Нові особливості та поліпшення
2. text-overflow
3. Тег <progress>
4. Тег <meter>
5. Вибір кольору (<input type = "color">)
6. Завантаження декількох файлів (<input type = "file" multiple>)
7. підказує текст
8. введення телефону
9. валідація форм
10. помилки браузера

Наша взаимовыгодная связь https://banwar.org/

якщо подивитися статистику використання браузерів в Рунеті, то можна однозначно заявити, що IE поступово здає свої позиції, а на перше місце виходять Firefox і Opera. Навіть склавши між собою різні версії браузерів, отримаємо, що лідер змінився і сумарне використання Opera і Opera Mini, вище, ніж у всіх інших браузерів, включаючи Internet Explorer. Можливо, не дуже коректно враховувати браузер для мобільних пристроїв, проте, тенденція очевидна. В іншому світі вплив Опери не настільки вражаюче, але в Рунеті цей браузер люблять і активно використовують люди найрізноманітніших професій. Чергова, одинадцята версія Опери повинна зміцнити лідерство браузера і, можливо, переманити до себе прихильників Internet Explorer і Firefox.

Якщо порівнювати з попередньою версією 10.63, то якихось глобальних змін не помітно, проте зроблений великий крок вперед по відношенню до десятої гілці в цілому. Інтерфейс став зручніше, красивіше і увібрав в себе останні тенденції розробників браузерів. Оскільки мене Опера цікавить в першу чергу як розробника, я коротко опишу деякі нові можливості і докладніше зупинюся на речах, пов'язаних зі створенням сайтів.

Нові особливості та поліпшення

• Використовується новий движок Presto 2.7.
• Адресний рядок зазнала деяких змін, тепер ім'я протоколу ховається, також не відображаються параметри GET-запиту. Для акцентування уваги на адресу другорядні елементи (імена піддоменів і каталогів) виводяться блідим сірим кольором. Порівняйте один і той же адресу в різних версіях Опери (рис. 1-2).

Мал. 1. Адресний рядок в Опері 10.63

Мал. 2. Адресна рядок в Опері 11

Щоб подивитися повну адресу з усіма опущеними параметрами, досить клацнути по адресному рядку.

• Виберіть можна групувати, всього лише перетягнувши одну вкладку поверх іншої. Згруповані вкладки позначаються стрілкою (рис. 3), вона ж дозволяє швидко розгорнути всю групу для доступу до вкладок групи (рис. 4).

Мал. 3. Група вкладок

Мал. 4. Розгорнута група

• Додані розширення як в Chrome, що включають новий функціонал в браузері. Поки доступних розширень мало, але з огляду на детальну документацію і приклади по їх створенню, можна очікувати сплеск появи нових розширень найближчим часом. список розширень .

Тих розробників, які бажають поставити відразу дві версії для тестування і порівняння сайтів, поспішаю порадувати. Це вам не IE, тому Opera легко дозволяє ставити кілька версій одночасно. При установці, єдина умова, необхідно вказати різні папки для програм.

Тепер перейдемо до змін Опери 11, цікавим для розробників.

text-overflow

стильова властивість text-overflow тепер підтримується без всяких приставок -o-, але для забезпечення сумісності доведеться якийсь час вказувати обидва властивості. Ось це поєднання буде працювати у всіх браузерах Опери, починаючи з дев'ятої гілки. А також у всіх інших браузерах, за винятком Firefox, який поки не розуміє text-overflow.

-o-text-overflow: ellipsis;
text-overflow: ellipsis;

Тег <progress>

підтримується тег <Progress> з HTML5. Браузери поки погано працюють з цим тегом, до того ж специфікація не говорить про те, як повинен виглядати результат його використання. Тому в хром і Опері, які розуміють цей тег, вид сильно відрізняється (рис. 5).

а. Google Chrome 8

б. Opera 11

Мал. 5. Результат використання тега <progress>

Тег <meter>

Додана підтримка тега <Meter> з HTML5. За своєю дією цей тег схожий на попередній, але мета його використання інша. Знову ж, специфікація не встановлює вимоги щодо результату застосування тега <meter>, тому в браузерах Хром і Опера спостерігається різночитання (рис. 6).

а. Google Chrome 8

б. Opera 11

Мал. 6. Результат використання тега <meter>

Найцікавіші зміни пов'язані з формами, точніше з їх елементами. У HTML5 введено безліч специфічних полів для введення конкретних значень: адреси електронної пошти, веб-адреси, телефону, числа, кольору, а також для пошуку. Opera 10 і так лідирувала за кількістю підтримуваних полів форм, але версія 11 додала підтримку нових фіч, яких поки немає ні в одному іншому браузері. Особливість форм HTML5 в тому, що вони прекрасно працюють в будь-яких браузерах, включаючи стародавні. Інша справа, що користувачі останніх версій браузерів побачать дещо інший, більш приємний результат. Давайте подивимося, що «смачного» приготувала нам Опера 11.

Вибір кольору (<input type = "color">)

Виглядає як звичайне текстове поле для введення шістнадцятирічних значень, але це тільки в тих браузерах, що не підтримують значення color. В Опері же виглядає просто шикарно (рис. 7), при цьому не треба ніяких фреймворків і скриптів.

Мал. 7. Вибір кольору

Завантаження декількох файлів (<input type = "file" multiple>)

З завантаженням одного файлу на сервер проблем ніколи не виникало, достатньо додати <input type = "file">. Складнощі починалися, коли було потрібно завантажити кілька файлів одночасно. Зазвичай це обходилося додаванням кількох полів type = "file". В Опері 11 можна завантажувати відразу декілька файлів, всього лише додавши атрибут multiple. Вид поля при цьому змінюється незначно (рис. 8).

Мал. 8. Поле для відправки одного і декількох файлів

підказує текст

Докладно зупинятися на цьому не буду, бажаючих відправляю до статті божевільні форми , Де в деталях розповідалося про підказує тексті.

введення телефону

Нове поле <input type = "tel"> призначений для введення телефонного номера. Яких-небудь відмінностей від текстового поля я не помітив.

валідація форм

У HTML5 для форм введена «захист від дурня», докладніше про неї можете почитати в статті божевільні форми .

Крім вже наявної підтримки валідації в Опері 11 додані наступні поліпшення:

• перевірка <input type = "email"> на коректність;
• якщо в поле <input type = "url"> вводити адресу без http: //, то протокол буде додано автоматично.

помилки браузера

Незважаючи на виконану розробниками браузера велику роботу, в новій версії виявлений ряд помилок, причому деякі з них тягнуться з ще давніх часів, а інші виникли через кривої реалізації. Ось кілька виявлених, по частині інших можна обговорити на форумі.

• Не підтримуються дробові відсотки. 19.9% ​​сприймається як 19%, без всяких заокруглень. Решта браузери, ясна річ, округлюють відсотки за правилами математики.
• Валідація деяких елементів форм реалізована не до кінця. Наприклад, для <input type = "number"> не робиться перевірка на число і щоб число знаходилося в зазначених межах. В поле <input type = "email"> можна вводити що завгодно.
• Для власних тегів не працюють події. <Test onclick = "alert ( 'Працює!')"> Клік </ test> при натисканні по тексту не виведе повідомлення, як це зроблять інші браузери.
• Dragonfly на деяких сайтах глючил і відмовлявся інспектувати елементи.

Щоб закінчити на мажорній ноті, а браузер цього заслуговує, скажу, що Опера 11 однозначно вийшла. Вийшла саме такий, як очікувалося і хотілося - різкою, що розширюється, зручною і підтримуючої стандарти. А то, що помилки є, дурниця, в новій версії поправлять.

Посилання по темі