Главная | Пиротехника

Наша совместная команда Banwar.org

Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

17 CSS + HTML альтернатив кросбраузерності верстки

  1. CSS + HTML сніпети кросбраузерності коду
  2. Кросбраузерності RGBA колір
  3. кросбраузерності прозорість
  4. Обертання зображення / Збільшення
  5. повнорозмірний фон
  6. Фоновий шаблон або кулька без файлу картинки
  7. тінь тексту
  8. мульти border
  9. тінь блоку
  10. закруглені куточки
  11. приховування контенту
  12. Не використовуйте приховані абзаци
  13. Clearfix
  14. @ Font-face
  15. Лапки цитати без картинки
  16. CSS для iPhone4
  17. CSS горизонтальна і вертикальна орієнтація для мобільних пристроїв
  18. після слів

Дійсно доводитися багато праці докласти, щоб досягти одного виду сторінки у всіх браузерах. Вам не доведеться винаходити колесо кожен раз, якщо ви скористаєтеся цією збіркою кросбраузерності HTML + CSS коду. Сподіваємося наша праця був не марний, а для вас буде корисний.

Мета даної статті зібрати корисні рішення на HTML і CSS коді, відповідно кросбраузерності. Тобто, ці приклади коду будуть відображатися у всіх браузерах однаково.

+ IE - мається на увазі підтримка функціональності коду в браузері Internet Explorer.

CSS + HTML сніпети кросбраузерності коду

  1. Мінімальна і максимальна ширина блоку (+ IE)
  2. Кросбраузерності RGBA колір (+ IE)
  3. Прозорість (+ IE)
  4. Обертання зображення / Збільшення (+ IE)
  5. Повнорозмірний фон (+ IE)
  6. Фоновий шаблон або кулька без файлу картинки
  7. Тінь тексту (+ IE)
  8. Мульти border (+ IE)
  9. Тінь блоку (+ IE)
  10. закруглені куточки
  11. приховування контенту
  12. Не використовуйте приховані абзаци
  13. Clearfix (+ IE)
  14. @ Font-face (+ IE)
  15. Лапки цитати без картинки
  16. CSS для iPhone4
  17. CSS горизонтальна і вертикальна орієнтація для мобільних пристроїв

Мінімальна і максимальна ширина блоку

Багато з вас, до сих пір використовували стандартний min і max width ... але Internet Explorer буває видає свої фокуси з цього приводу. В цьому випадку, можна використовувати цей вислів, яке частково містить JS код. Але, це найкраще рішення.

#content {width: expression (document.body.clientWidth <762? "760px": document.body.clientWidth> 1242? "1240px": "auto"); min-width: 760px; max-width: 1240px; }

Кросбраузерності RGBA колір

Тут ми будемо використовувати деякі IE фільтри для вирішення цієї проблеми. З цим, RGB колір буде працювати в IE6 і вище версіях.

Функціонування RGB кольору в IE засноване на використанні фільтра градієнта. Ми встановимо один колір в початок і кінець градієнта.

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

.element {background-color: transparent; background-color: rgba (255, 255, 255,0.8); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 80ffffff, endColorstr = # 80ffffff); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # 80ffffff, endColorstr = # 80ffffff)"; }

кросбраузерності прозорість

Що ж, знову фільтри! У цьому випадку, ми будемо використовувати різні синтаксиси для IE8 і більш ранніх версій.

.selector {ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)"; / * Internet explorer 8 * / filter: alpha (opacity = 50); / * Internet explorer 5 ~ 7 * / -khtml-opacity: 0.5; / * Khtml, old safari * / -moz-opacity: 0.5; / * Mozilla, netscape * / opacity: 0.5; / * Fx, safari, opera * /}

Обертання зображення / Збільшення

Ще одна кумедна штука, яку мало хто знає і користується нею. Існує ще один фільтр, який дозволяє обертати зображення, але тільки до 90 градусів. Також ви можете робити відображення зображень.

img {transform: rotate (180deg) scale (-1, 1); / * For firefox, safari, chrome, etc. * / -Webkit-transform: rotate (180deg) scale (-1, 1); -moz-transform: rotate (180deg) scale (-1, 1); / * For ie * / filter: progid: DXImageTransform.Microsoft.BasicImage (rotation = 2, mirror = 1); / * Opera * / -o-transform: rotate (180deg) scale (-1, 1); }

повнорозмірний фон

Іноді доводиться вліпити повнорозмірний фон на сторінку. Сподіваюся ви не використовуєте Java Script, так як можна зробити це за допомогою CSS.

Вся магія полягає в створенні div блоку, який покриває весь екран. Природно фоном цього блоку буде картинка.

.content {position: relative; width: 760px; z-index: 10; } .Background {top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 2; } .Portrait {height: 100%; } .Landscape {width: 100%; } .Full {width: 100%; height: 100%; } <Div class = "content"> <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaa </ p> </ div> <div class = "background"> ​​<img class = "full | portrait | landscape" src = "imgURL" alt = "" / > </ div>

Фоновий шаблон або кулька без файлу картинки

Дуже сумно, що IE не дозволяє використовувати зображення в форматі Base64. Кращий спосіб, використовувати це для мобільних пристроїв. Я використовую це для створення кульок, без файлу картинки. Це зручно, так як, картинка невелика за розміром, багато тексту не займе. Ось як вмонтувати її в CSS код.

ul {list-style-image: url (data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg ==); }

тінь тексту

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

p {text-shadow: # 000000 0 0 1px; zoom: 1; filter: progid: DXImageTransform.Microsoft.Glow (Color = # 000000, Strength = 1); -ms-filter: "progid: DXImageTransform.Microsoft.dropshadow (OffX = -1, OffY = -1, Color = # 000000) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = -1, Color = # 000000 ) progid: DXImageTransform.Microsoft.dropshadow (OffX = 1, OffY = -1, Color = # 000000) progid: DXImageTransform.Microsoft.dropshadow (OffX = 1, OffY = 0, Color = # 000000) progid: DXImageTransform.Microsoft. dropshadow (OffX = 1, OffY = 1, Color = # 000000) progid: DXImageTransform.Microsoft.dropshadow (OffX = 0, OffY = 1, Color = # 000000) progid: DXImageTransform.Microsoft.dropshadow (OffX = -1, OffY = 1, Color = # 000000) progid: DXImageTransform.Microsoft.dropshadow (OffX = -1, OffY = 0, Color = # 000000) "; }

мульти border

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

div {-ms-filter: "progid: DXImageTransform.Microsoft.Shadow (color = # 212121, direction = 180, strength = 0)"; / * IE 8 * / filter: progid: DXImageTransform.Microsoft.Shadow (color = # 212121, direction = 180, strength = 0); / * IE 7- * /} div: before {position: absolute; top: 0px; width: 100%; height: 100%; border-top: 1px solid # 212121; / * Top border! * / Content: ''; } Div: after {position: absolute; width: 100%; height: 100%; top: 1px; border-bottom: 1px solid # 212121; / * Bottom border! * / Content: ''; }

тінь блоку

Той же фільтр, який ми використовували для створення мульти бордера, будемо використовувати для створення тіні до div блоку.

.shadow {-moz-box-shadow: 0 0 4px # 000; -webkit-box-shadow: 0 0 4px # 000; -ms-filter: "progid: DXImageTransform.Microsoft.Glow (color = # 666666, strength = 3)"; filter: progid: DXImageTransform.Microsoft.Shadow (color = # 666666, direction = 0, strength = 3) progid: DXImageTransform.Microsoft.Shadow (color = # 666666, direction = 90, strength = 3) progid: DXImageTransform.Microsoft. Shadow (color = # 666666, direction = 180, strength = 3) progid: DXImageTransform.Microsoft.Shadow (color = # 666666, direction = 270, strength = 3); box-shadow: 0 0 4px # 000; }

закруглені куточки

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

.rounded {-moz-border-radius: 10px; / * Gecko * / -webkit-border-radius: 10px; / * Webkit * / border-radius: 10px; / * CSS3 standard * / -khtml-border-radius: 10px; / * Old konkeror * / -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; -khtml-border-radius-bottomright: 10px; -khtml-border-radius-bottomleft: 10px; -khtml-border-radius-topright: 10px; -khtml-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; }

приховування контенту

Іноді доводиться приховувати деякий контент, як правило ви користуєтеся display: none. Сьогодні я запропоную трохи інший підхід до вирішення даної проблеми, так як це властивість не кожен браузер підтримує. Але, вам потрібно пам'ятати, що приховування контенту - це ризик потрапити під санкції пошукових систем.

.hidden {position: absolute; top: -10000px; left: -10000px; }

Не використовуйте приховані абзаци

Раз ми вже почали говорити за приховування контенту, моя порада, не використовуйте приховані абзаци всередині h1 тега, заради SEO. Краще використовувати alt атрибут до зображення, так більш семантично і доречна по відношенню до пошукових роботів.

<H1> <img src = "myLogo" alt = "My company" /> </ h1>

Clearfix

Багато з вас знають про використання .clearfix способу коригування висоти, коли використовуєте обтікання float. Що ж, у багатьох випадках, велика кількість коду може бути замінено двома рядками.

.clearfix {zoom: 1; overflow: hidden; }

@ Font-face

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

@ Font-face {font-family: 'MandatoryRegular'; src: url ( 'font / mandator-webfont.eot'); src: url ( 'font / mandator-webfont.eot? #iefix') format ( 'embedded-opentype'), url ( 'font / mandator-webfont.woff') format ( 'woff'), url ( 'font / mandator-webfont.ttf ') format (' truetype '), url (' font / mandator-webfont.svg # MandatoryRegular ') format (' svg '); font-weight: normal; font-style: normal; }

Лапки цитати без картинки

Це можна зробити за допомогою псевдоелемента before. І це не складно, лише кілька рядків CSS коду, що набагато менше розміру картинки, яку багато хто використовує до сих пір.

blockquote: before {display: block; float: left; margin: 10px 15px 0 0; font-size: 100px; / * Let's make it a big quote! * / Content: open-quote; / * Here we define our: before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is "* / color: #bababa; text-shadow: 0 1px 1px # 909090; }

CSS для iPhone4

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

Так як iPhone4 має більшу роздільну здатність екрана, ваше старе лого, може виглядати занадто маленьким. Це можна вирішити за допомогою кількох рядків CSS коду.

@media handheld, only screen and (max-width: 767px) {.logo {/ * common low-res and low-size, of course * / background: url (logo.jpg) no-repeat; }} @Media only screen and (-webkit-min-device-pixel-ratio: 2) {.logo {background: url (logo2x.jpg) no-repeat; background-size: 212px 303px; }}

CSS горизонтальна і вертикальна орієнтація для мобільних пристроїв

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

/ * Smartphones (portrait and landscape) ----------- * / @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {/ * Styles * /} / * Smartphones (landscape) ----------- * / @media only screen and (min-width: 321px) {/ * Styles * /} / * Smartphones (portrait) ---- ------- * / @media only screen and (max-width: 320px) {/ * Styles * /} / * iPads (portrait and landscape) ----------- * / @ media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {/ * Styles * /} / * iPads (landscape) ----------- * / @ media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {/ * Styles * /} / * iPads (portrait) -------- --- * / @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {/ * Styles * /} / * Desktops and laptops --- -------- * / @media only screen and (min-width: 1224px) {/ * Styles * /} / * Large screens ----------- * / @media only screen and (min-width: 1824px) {/ * Styles * /} / * iPhone 4 ----------- * / @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min-device-pixel-ratio: 1.5) {/ * Styles * /}

після слів

Ось наша добірка корисних шматків кросбраузерності HTML + CSS коду. Це все було перевірено на власному досвіді. Якщо у вас є що додати, або виникли питання, будемо раді вислухати в коментарях нижче.

Ви можете розширити свої знання про кросбраузерності верстці, читаючи такі матеріали:

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

Кросбраузерності верстка CSS - маленькі хитрощі, як досягти кросбраузерності CSS коду.


Джерело матеріалу ...

далі: Як збільшити цільовий трафік на сайт? 100% гарантія припливу трафіку!


ClientWidth <762?
ClientWidth> 1242?
Eot?

Новости

Banwar.org
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.