Чи варто використовувати HTML5 та / або CSS3 для створення свого веб-сайту?


16

Новий матеріал HTML5 / CSS3 (Web8!) Звучить круто! Чи варто почати його використовувати зараз чи дотримуватися css / xhtml дочекатися, коли інші браузери зможуть його використовувати?


Що ви маєте на увазі під Web8?
Аарон

3
html5 + css3 = web8!
Джейсон

Що з HTTP 1.0 та ECMAScript 5.0?

Відповіді:


13

Зараз HTML5 підтримується всіма браузерами, навіть IE5! (Якщо ви використовуєте скрипт html5shiv). Я настійно рекомендую прочитати http://diveintohtml5.org Це один з найкращих ресурсів HTML5.

Що стосується CSS3, якщо ви користуєтесь цим, переконайтеся, що ви також використовуєте predix постачальника, крім звичайного синтаксису. напр

межа-радіус

-моз-границя-радіус

-webkit-межа-радіус

Я вірю в прогресивне вдосконалення. Підтримка css3 IE9 звучить дуже перспективно.


2
Я думаю, ти маєш на увазі поставити межу-радіус на дні, правда?
Грант Пейлін

1
На жаль, оригінального сайту Dive Into HTML5 вже немає. Є багато дзеркал. Ось один: diveintohtml5.info
М. Дадлі

12

Ймовірно.

Є частини HTML5, якими ви можете скористатися зараз, сьогодні. Форми, наприклад. Якщо у вас є <input type="email">браузер, який не підтримує HTML5 (так, навіть IE6), ви просто побачите те саме, що бачили б, як і раніше <input type="text">. Однак у браузері, що підтримує елементи форми HTML5, ви отримуєте переваги emailтипу: а саме клієнт буде помилково перевіряти значення без додаткових JS. Хоча так, вам все одно знадобиться JS для браузерів, які не є HTML5, у вас буде ще один шар перевірки в підтримуваних браузерах.

Ще одне запитання на цьому веб-сайті дає хороший огляд нових функцій, доступних вам через HTML5 та CSS3. У цьому питанні також є багато хороших даних про форми.

Оскільки Internet Explorer (і старіші версії Safari та Firefox, як би це не було рідко) не підтримує багато з цих функцій, вам залишаються бібліотеки JavaScript, щоб заповнити порожнечу. Сюди входить показ про ефективність (навіть якщо це потрібно лише браузерам), тому слід пам’ятати про своїх користувачів, коли їх використовують.

Щоб пом'якшити проблеми з відсутністю підтримки функцій, якщо ви вирішите, що ці нові функції варті того, використовуйте наступні ресурси:

  • html5shiv: JavaScript Shiv для IE для розпізнавання та стилювання елементів HTML5.
  • CSS3 Pie: поведінка, що додається IE (.htcфайл), що робить Internet Explorer 6-8 здатнимнадатидекілька найкорисніших функцій декорування CSS3. При застосуванні до елементу, він дозволяє І.Є. розпізнавати і відображатиborder-radius,box-shadow,border-image, множинні фонові зображення, іlinear-gradientякості фонового зображення.
  • Modernizr: бібліотека Javascript, яка використовує функцію виявлення функцій для тестування поточного браузера на майбутні функції CSS3 / HTML5, додаючи класи до елемента <html> для тих, хто підтримується. Також створюється одноназваний глобальний об’єкт JavaScript, який містить булеву властивість для кожної функції,trueякщо вона підтримується, аfalseякщо ні. Додана підтримка для укладання і печаток HTML5 елементівтакви можете використовувати такі елементи, як<section>,<header>і<nav>.
  • тобто-css3.js: дозволяє Internet Explorer ідентифікувати селектори CSS3 псевдокласу та візуалізувати будь-які правила стилю, визначені з ними. Підтримує різні селектори CSS3, на основі яких використовується бібліотека JavaScript.
  • DD_belatedPNG: бібліотека Javascript, яка додає підтримку зображень PNG до IE6. Ви можете використовувати PNGs якsrcз<img />елемента абоякостіbackground-imageвластивості в CSS. На відміну від цьогоAlphaImageLoader,background-positionіbackground-repeatпрацювати за призначенням, і елементи відповідатимуть наa:hoverпсевдоклас.
  • TwinHelix IE PNG Fix: додаток до IE (.htcфайл), що додає підтримку PNG з непрозорістю до IE 6. Повна позиція та повторення фонового CSS підтримують (включаючи спрайти CSS) з додатковим (включеним) JavaScript.
  • Що б там не було: наведіть: поведінка, що додається до IE (.htcфайл), що автоматично виправляє: наведення,:: активний та: фокус на примх IE6, IE7 та IE8, дозволяючи вам використовувати їх так, як і в будь-якому іншому браузері. Включаєсебе підтримку AJAX,означаєщо будь-який HTMLякий отримує вставлено в документдопомогою JavaScript також підштовхне:hover,:activeі:focusстилі в IE.

Цікаво відзначити, що DD_belatedPNG вирішує обидва питання, вирішені компанією "Що завгодно": наведіть курсор та IE PNG-фіксатор TwinHelix з чистим JavaScript, тоді як у будь-якому випадку: наведіть курсор і IE PNG-фіксатор TwinHelix використовуйте комбінацію JavaScript та IE, пов'язаних з поведінкою ( .htc files).

Як правило, люди, які використовують браузери, які не входять до Інтернету, оновляють їх, коли їх запитують, і тому IE несе на собі основну увагу: "Але деякі браузери не підтримують цю функцію!" скарги. Modernizr додасть можливість використовувати HTML5 / CSS3 до будь-якого браузера, який ви, швидше за все, бачите, а не лише IE. тобто-css3.js зробить те ж саме, вам просто доведеться реалізувати це без умовного коментаря IE (це означає, що всі браузери в кінцевому підсумку отримують його, якщо ви не включите його до перевірок серверного агента користувача - це значно знизить продуктивність для всіх ваших відвідувачів, а не лише для ваших користувачів IE.)


Вибачте, Брайсон, але те, що додає підтримку HTML5 до Internet Explorer - це абсолютно кошмари для практичних цілей.

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

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

5

Використовуйте будь-яку технологію, яка найбільше відповідає вашим потребам.

Ерік Мейєр написав хорошу статтю про те, чому починати використовувати специфічні для постачальника префікси за правилами CSS, це не кульгав, як раніше використовували хаки-фільтри css.

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


2

Деякі інші корисні посилання, вирішуючи, які функції CSS3 ви можете використовувати: http://caniuse.com/ (дає чітко розбивати, які елементи та селектори можна використовувати на яких платформах)

http://css3please.com/ (дитячий майданчик для редагування сторінки, який може поплутатися з функціями CSS3. Це також дає поради щодо того, які методи та функції підтримуються, які платформи для часто запитуваних стилів, наприклад, закруглені кути, градієнтні фони, тощо)


1

Я використовую його для покращення роботи в сучасних браузерах, щоб користувачі з хорошим браузером отримували "нагороду" приємніше виглядають інтерфейсу користувача (Закруглені кути, тіні, такі собі речі). Я думаю, ви не повинні використовувати його в якості заміни, скажімо, для вашої поточної перевірки форми клієнтури, якщо ви не отримали для неї якусь резервну копію JS.


1

Якщо ви починаєте новий проект за допомогою HTML5, який також повинен підтримуватися у старих браузерах, найкращим варіантом є використання Initializr -

http://www.initializr.com/

Він використовує HTML5 Boilerplate на початку, і додає кілька власних варіантів, щоб надати вам шаблон, який ви можете розгорнути на своєму власному сайті. Вона включає бібліотеки Javascript (наприклад, HTML Shiv або Modernizr), що зробить ваш сайт сумісним із старими браузерами.


0

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


0

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

Якщо ні, незалежно від того, чим ви користуєтесь, вам завжди доведеться враховувати найменший загальний знаменник. У цьому випадку це, мабуть, комбінація IE 6 та ряду мобільних браузерів. Отже, якщо ви рухаєтесь далі за допомогою HTML 5, у вас є додаткова проблема - переконатися, що ваш сайт добре деградує.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.