Работа с формами CSS и IE Doctype

Doctype следует считать обязательным для всех веб-сайтов. Отсутствие такового приведет к тому, что IE перейдет в режим причуд. Это плохо.

Так было уже очень давно (с тех пор, как был выпущен IE6), поэтому любому, кто все еще не использует Doctype, действительно нельзя разрешать писать HTML для собственной безопасности! ;-) Поэтому я не думаю, что вам следует беспокоиться о том, как выглядит ваш код без doctype.

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

Кроме того, обратите внимание, что большинство фигур на связанной странице не будут работать в IE8 или более ранних версиях. (круг и овал используют CSS border-radius, а многие другие используют transform, ни один из которых не поддерживается в IE8, и довольно много из них используют :before и :after CSS селекторы, которые есть в IE8, но не в IE7). Даже там, где HTML + CSS может достичь этих результатов, он определенно не предназначен для такого рода вещей. Фактически, даже в Firefox 3.6 я вижу некоторые сбои рендеринга на странице, на которую вы ссылаетесь.

Если вы хотите рисовать фигуры на своей странице с помощью кода, вам лучше использовать подходящую библиотеку для рисования, чем пытаться взломать HTML + CSS для выполнения своих прихотей.

Я бы порекомендовал такую ​​библиотеку, как Raphael. Эта библиотека может рисовать произвольные фигуры в браузере, используя язык векторной графики SVG. Он работает даже в более старых версиях IE (где он возвращается к аналогичному языку, называемому VML), поэтому у вас есть практически полная кроссбраузерная поддержка. Он также поддерживает анимацию и другие эффекты, что было бы совершенно невозможно с формами CSS, которые вы сейчас используете.