Правильний хак clearfix
Урок по правильному застосуванню хака clearfix.
Я використовую хак clearfix на всіх своїх сайтах. Він ще відомий як «Easy Clearing Hack» - використовується для очищення обтікання блоків (div) без використання структурної розмітки. Це є дуже ефективним у вирішенні питань компонування і невідповідностей браузера, без необхідності змішувати структуру з презентацією. Протягом останніх декількох років, я прийняв до уваги декілька корисних байтів інформації щодо методу «Easy Clear». У цій статті я хочу зібрати всі ці уроки щодо розширеної версії CSS хака clearfix.
Використовуйте пробіли замість точки, щоб запобігти зміні розміщення.
Ось реалізація цього хака, як представлено в одній з оригінальних статей, що описують метод:
Зверніть увагу на рядок, що містить властивість content: «.» ;. Я виявив що точка в лапках має неприємну схильність до порушення зміна розміщення. При додаванні литерала точка після .clearfix блоку (в ie, через .clearfix: after селектор) хак створює помилку в деяких браузерах. І не тільки для Internet Explorer - в залежності від розташування, навіть Firefox буде тупити після відключення: after - на основі псевдо-точки. Потрібне рішення цього безладу? Замінити точку на простий пробіл: content: ""; - ця хитрість виявилася цілком успішною, що я тепер використовую це властивість у всіх своїх clearfix-ах.
Додати нульове властивість font-size щоб зробити все гладко.
Інша дивна несумісність помічена в clearfix-е - розташування пропадає, коли властивість CSS font-size. що знаходиться в хаке устанавліваеться в нуль:
Звичайно, це може бути зайвим при використанні пробілу замість символу «точка» (як описано вище), але я, чесно кажучи, не турбуюся про це. Озираючись назад, я думаю що можливо створити це рішення до відкриття фікса пробілу. Тим не менш, деякі браузери обробляють пробіл як текст, так що це все ж може виявитися корисним. Можливо так, можливо ні - я збираюся кинути його для всіх вас CSS-гуру.
Остерігайтеся дезінформації щодо цього методу.
Ні, я не намагаюся вас втомити порадами пропонованих в цій статті - ви побачите, що вони цілком нешкідливі. Замість цього, я маю на увазі помилкову інформацію, знайдену в іншому місці в Інтернеті і навіть в друкованому вигляді. Ось презентація хака clearfix, описана в чудовій книзі Joseph W. Lowery's «CSS Hack # 038; Filters »:
Ой! Ви бачите проблему? Насправді тут 2 потенційні проблеми в .clearItem Mr. Lowery's. Перша проблема: використання застарілого значення inline у властивості display в середині декларації .clearItem:
як обговорювалося в оригінальній статті, значення повинно бути inline-block - фікс обтікання для IE / Mac:
Друга проблема: Mr. Lowery's включає * html .clearItem * селектор в наступному рядку:
А тепер всі разом ...
Складаємо все разом і об'єднуємо ці уроки з вихідної (правильної) версією «Easy Clear Method», ми бачимо - повністю функціональне рішення хака clearfix:
і, знято! Сподіваюся, вам було так само весело, як я зробив в процесі написання цієї статті. якщо немає, то сподіваюся що в цьому раунді "засвоєних уроків" представлені деякі корисні відомості про всюдисущої і корисному хаке clearfix.
І нарешті - цей пост присвячений CSS і я не очікую нічого доброго, тільки самої суворої критики ідей, викладених в даному документі. - Валяйте, все ви божевільні CSS-голови!)))
(Поки оцінок немає)