Golovna - CSS insight - brauzerlararo yechim

6 ta ovozdan 5 tadan 3,8 tasi

Ushbu darsda biz CSS-ning ravshanligini ko'rib chiqamiz, biz sahifaning turli elementlarini qanday aniqlik bilan berishni va bir xil effekt turli brauzerlarda ishlashi uchun to'liq o'zaro faoliyat brauzer muvofiqligiga erishishni o'rganamiz.

Har qanday elementning tushunchasini qanday o'rnatish kerak CSS3 da aniq elementlarni yaratish har qanday elementlar bilan cheklanishi mumkin bo'lgan shaffoflik kuchiga asoslanadi. U

berilgan kuch

Bu erda 0 - umumiy ravshanlik (barcha elementlar uchun) va 1 - to'liq aniqlik yo'qligi.

Qiymatlar kasr shaklida yoziladi: 0,1, 0,2, 0,3 va boshqalar.

Vikoristan dumba: Serendipity Brauzerlararo ko'rinish

Biroq, barcha brauzerlar shaffoflikning yuqori kuchini qabul qilmaydi va amalga oshiradi. Bunday vaziyatlarda quvvat yoki filtr deb ataladigan narsadan foydalanish kerak. CSS3 shaffofligining kuchi bunday turlarni rag'batlantiradi

Mozilla brauzerlari 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+. Juda yaxshi :) brauzer yak

Internet Explorer

Hatto 9.0 versiyasigacha quvvatning shaffofligi va ko'rinishi qo'llab-quvvatlanmaydi, qaysi brauzer uchun filtr quvvati va alfa qiymatidan foydalanish kerak (Opacity=X), buning uchun X 0 dan 100 gacha bo'lgan raqamdir. idrok etish g'ayrati bilan baholanadi.

0 butunlay tushunarli va 100 mutlaqo noaniq.

Nima shov-shuv?

Firefox brauzeri 3.5 versiyasiga qadar u shaffoflik o'rniga power -moz-opacity-ni qo'llab-quvvatlaydi. KHTML dvigateliga asoslangan Safari 1.1 va Konqueror 3.1 kabi brauzerlar quyidagi brauzer koʻrinishi opsiyasidan foydalanadi: -khtml-opacity.

Qanday qilib CSS-ni barcha brauzerlarda bir xil ko'rinishi uchun shaffof qilishimiz mumkin?

Keling, tushunarli kichkintoy tomonidan yaratilgan variantlar sonini ko'rib chiqaylik.

Birinchi rasmda aniqlik yo'q, ikkinchisida 50%, uchinchisida 30% ravshanlik mavjud.

Natija:

Kursorni rasm ustiga olib borishda CSS ravshanligi. Ko'pincha kursor uning ustiga o'rnatilganda aniq rasm yoki boshqa elementni yaratish kerak bo'ladi. To'lovni amalga oshirish mumkin

CSS yordami

psevdo-sinf: hover.

Bizning rasmimiz uchun ikkita sinfni ro'yxatdan o'tkazish kerak, biri asosiy - rasmning nofaol holati va ikkinchisi psevdo-sinf bilan: kursorni olib keling, bu erda kursorni olib borish paytida rasmning ravshanligini ko'rsatish kerak. .

Natijani demoda ko'rishingiz mumkin.

CSS-da fon ravshanligi.

Misol sifatida, keling, qo'shimcha rasm bilan yaratilgan tomonning foni va qo'shimcha rang bilan yaratilgan fon bilan blok va 50% ravshanlik bilan variantni yarataylik.

Butt kodi:
Matn

Eksa joylashtirilgan kodning natijasidir: orem Ipsum - bu oddiy matnlarni chop etish va matn terish sanoati. Lorem Ipsum 1500-yillardan beri sanoatning standart qo‘g‘irchoq matni bo‘lib kelgan, o‘shandan beri noma’lum printer galleyni olib, kitob namunasini yaratish uchun shifrlagan. 1960-yillarda mashhur bo‘lib, Lorem Ipsum parchalarini o‘z ichiga olgan Letraset varaqlari tomonidan tahrirlangan va yaqinda Aldus PageMaker kabi ish stoli nashriyot dasturlari, jumladan Lorem Ipsum versiyalari bilan.

Yangi boshlanuvchilar uchun biz bilamizki, bizning hujjatimiz faqat bitta monitor maydonidan ko'proq narsani qamrab oladi - u 3 o'lchovli ko'rinadi, bu men "Z-indeks" statistikasida aytib o'tganim. Tasvirlar to'plamining tepasida joylashgan, boshqa elementlarga kirishni to'sib qo'ygan butunlay shaffof to'pni joylashtirish aniq. Bunday holda, aniq bloklarning barcha asosiy turg'unligi.

Soya effekti deb ataydiganlardan qat'i nazar, aniq ko'rinadigan to'p xuddi shu narsani qiladi. Masalan, ko'plab mashhur foto galereyalarda fotosuratlar va ularni boshqarish uchun elementlar ko'rsatiladigan soyali shar tashkil etilgan. Sahifada qolgan barcha narsalar shaffof to'p bilan "yopiq" ko'rinadi, bu sahifadagi barcha boshqa elementlarga kirishni bloklaydi.

Qo'shimcha JavaScript uchun ko'rinadigan bloklarni ko'rsatish/qo'shish.

Eksa, master va html-da tushunchaning butun siri.

08.02.2013 Biz ko'rish effektini kamaytirish uchun z-indeks va shaffoflikdan foydalanamiz.

ko'rinish: yashirin;

div id = "VideoFrame2" uslubi =

"pozitsiya: mutlaq; tepa: 25%; chap: 25%; fon rangi: oq; kenglik: 50%; balandlik: 50%;

shaffoflik: 0,99;

filtr: alfa (shaffoflik = 99); ko'rinish: yashirin;

z-indeks:2;

onclick = "javascript:HideForm();"

Ushbu kuchning asosiy xususiyati shundaki, tushunchaning ahamiyati faqat shira uchun emas, balki o'rtadagi barcha yordamchi elementlarga tegishli.

Bu fon va matn vizual tarzda hayratlanarli bo'lishini anglatadi.

shaffoflik

Internetda saytlarni yaratish va targ'ib qilish

Veb-dizaynda ba'zi ravshanlik elementning fonida o'rnatilgan RGBA rang formati bilan ham cheklangan.

Ma'no sifatida rgba yoziladi, so'ngra rang sxemasining qizil, ko'k va yashil tarkibiy qismlarining ma'nolari aniqlanadigan qo'llarda.

Qolgan ravshanlik 0 dan 1 gacha o'rnatiladi, ya'ni 0 aniq, 1 rangga aniq emas - sintaksis rgba.

Napivprozor tlo HTML 5 CSS 3 IE 9

Internetda saytlarni yaratish va targ'ib qilish.

Fon uchun noaniqlik qiymati 90% ga o'rnatiladi - aniq fon va tushunarsiz matn.

CSS-da ravshanlik effektini yaratish uchun shaffoflik kuchidan foydalaniladi.

Internetda saytlarni yaratish va targ'ib qilish.

IE8 brauzeri va uning oldingi versiyalari muqobil quvvat filtrini qo'llab-quvvatlaydi: alfa (shaffoflik = x) , bu erda "x" 0 dan 100 gacha qiymatlarni qabul qilishi mumkin, qiymat qanchalik kichik bo'lsa, element aniqroq bo'ladi.

Boshqa barcha brauzerlar 0,0 dan 1,0 gacha bo'lgan raqam sifatida qabul qilinishi mumkin bo'lgan standart CSS shaffofligini qo'llab-quvvatlaydi, qiymat qanchalik past bo'lsa, element shunchalik aniq bo'ladi:

Hujjat nomi

Sinab ko'ring

Qo'shimcha RGB ga tayinlangan ranglar biz ko'rishning alfa kanalini tanlash imkonini beradigan o'n oltilik qiymatlarga ko'tariladi.

Bu shuni anglatadiki, alfa ravshanligi bilan elementning fonida uning ostidagilarni ko'rish mumkin.

RGBA rang sxemasi sintaksis bo'yicha standart RGB qoidalariga o'xshaydi.

Biroq, qo'shimcha ravishda, biz qiymatni RGBA (RGB ni almashtirish) sifatida belgilashimiz va rang qiymatidan keyin 0,0 (ko'proq shaffoflik) dan 1 (ko'proq qorong'ilik) oralig'ida shaffoflikning qo'shimcha o'ninchi qiymatini belgilashimiz kerak.

Rang: rgba (255,255,0,0,5);

rang: rgba (100%, 100%, 0,0,5);

/* 06.07.2006 */

Quvvat shaffofligi va RGBA o'rtasidagi farq shundaki, quvvat shaffofligi har bir elementni tushunishni to'xtatib qo'yadi, shuning uchun butun element tushunarli bo'ladi.

Va RGBA elementning qirrali qismlariga (masalan, shunchaki matn yoki fon) ravshanlikni o'rnatishga imkon beradi:

Asosiy (fon rasmi: url(img.jpg); ) .prim1 (kenglik: 400px; hoshiya: 30px 50px; fon rangi: #ffffff; chegara: 1px qora; shrift ogʻirligi: qalin; shaffoflik: 0,5; filtr : alpha(shaffoflik=70);/*IE8 va oldingi versiyalar uchun*/ text-align: 1px bold black: center ) harakat qilib ko'ring;

Eslatma: RGBA qiymatlari IE8 va undan oldingi versiyalarda qo'llab-quvvatlanmaydi.

Alfa kanallari bilan rang qiymatlarini qo'llab-quvvatlamaydigan eski brauzerlar uchun zaxira rang variantini ta'minlash uchun birinchi RGBA qiymatini o'rnating: fon: rgb(255,255,0);

fon: rgba(255,255,0,0,5); CSS shaffofligi (CSS shaffofligi, JavaScript shaffofligi)Tushunishning ta'siri - bu maqolaning mavzusi.

Aslida, birinchi va oxirgi qoidalar IE5.5+ va CSS3 shaffofligini tushunadigan brauzerlar uchun kerak va o'rtadagi ikkita qoida buzilmasligi kerak, aks holda ular endi hurmat qilinmaydi (sizga nima kerakligini o'zingiz hal qiling).

Javascript noaniqlik simbiozi

Keling, yuqorida tavsiflangan turli xil brauzerlarning xususiyatlarini tushungan holda skript orqali tushunishni o'rnatishga harakat qilaylik.

Funktsiya setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) qaytarilsa; // Belgilangan identifikatorga ega element yo'q yoki brauzer ko'rinishni ko'rsatish usullarining barcha ma'lum funktsiyalarini qo'llab-quvvatlamaydi. agar (opacityProp=="filtr") // Internet Exploder 5.5+ (nOpacity *= 100; // Agar ko'rinish allaqachon o'rnatilgan bo'lsa, biz uni filtrlar to'plami orqali o'zgartiramiz yoki style.filter orqali aniqlik kiritamiz. var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; agar (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+"");// Boshqa filtrlarni qayta yozmaslik uchun "+=" dan foydalaning. ) boshqa// Boshqa brauzerlar elem.style=nOpacity;) funksiya getOpacityProperty() ( agar (document turi.body.style.opacity == "string") // CSS3 bilan mos keladi (Moz 1.7+, Safari 1.2+, Opera 9) }

"shaffoflik" ni qaytarish;

Aks holda (document turi.body.style.MozOpacity == "string")

// Mozilla 1.6 va undan kichik, Firefox 0.8

Siz ovqatni rad qilishingiz mumkin, lekin nima uchun ta'sir yo'liga tushuncha o'rnatmaysiz (=) power elem.style.filter = "...";

?

Quvvat filtri qatorining oxiriga qo'shish uchun "+=" dan foydalanish mumkinmi?

Boshqa filtrlarni "ustiga yozmaslik" uchun javob oddiy. Biroq, agar siz to'satdan filtrni shu tarzda qo'shsangiz, filtrning qiymatini o'rnatishdan oldin uni o'zgartira olmaysiz, shunchaki uni quvvat liniyasining oxiriga qo'shing, bu to'g'ri emas. Shuning uchun, agar filtr allaqachon o'rnatilgan bo'lsa, uni elementga biriktirilgan filtrlar to'plami orqali manipulyatsiya qilish kerak: elem.filters (aks holda, agar filtr hali elementga tayinlanmagan bo'lsa, uni filtrlash orqali boshqarish mumkin emas. ushbu to'plam). To'plam elementlariga kirish filtr nomi yoki indeks bo'yicha mumkin. Boshqa filtrlarni "ustiga yozmaslik" uchun javob oddiy. Biroq, agar siz to'satdan filtrni shu tarzda qo'shsangiz, filtrning qiymatini o'rnatishdan oldin uni o'zgartira olmaysiz, shunchaki uni quvvat liniyasining oxiriga qo'shing, bu to'g'ri emas. Shuning uchun, agar filtr allaqachon o'rnatilgan bo'lsa, uni elementga biriktirilgan filtrlar to'plami orqali manipulyatsiya qilish kerak: elem.filters (aks holda, agar filtr hali elementga tayinlanmagan bo'lsa, uni filtrlash orqali boshqarish mumkin emas. ushbu to'plam). Biroq, filtr ikkita uslubga, qisqa IE4 uslubiga yoki kodga kiritilgan IE5.5+ uslubiga qo'llanilishi mumkin. Boshqa filtrlarni "ustiga yozmaslik" uchun javob oddiy. Biroq, agar siz to'satdan filtrni shu tarzda qo'shsangiz, filtrning qiymatini o'rnatishdan oldin uni o'zgartira olmaysiz, shunchaki uni quvvat liniyasining oxiriga qo'shing, bu to'g'ri emas. Shuning uchun, agar filtr allaqachon o'rnatilgan bo'lsa, uni elementga biriktirilgan filtrlar to'plami orqali manipulyatsiya qilish kerak: elem.filters (aks holda, agar filtr hali elementga tayinlanmagan bo'lsa, uni filtrlash orqali boshqarish mumkin emas. ushbu to'plam). Element ko'rinishidagi silliq o'zgarish

Qaror tayyor.

1. Vikorist kutubxonasi opacity.js
2. fadeOpacity(this.id, "oR1") "onmouseout=";
3. fadeOpacity.back(this.id) " src="/img/strawberry.jpg" kengligi="100" balandligi="80" />" src="/img/tomato.jpg" kengligi="82" balandligi="100" /> " src="/img/sweet_cherry.jpg" kengligi="98" balandligi="97" /> Asosiy ma'lumotlar:

Biz kutubxonani funksiya bilan bog'laymiz;

Bu Vikory usuli qoidalarini anglatadi

fadeOpacity.addRule() Viklimo usuli

fadeOpacity() unib chiqishni kob qiymatidan terminal qiymatiga o'zgartiring, yoki

fadeOpacity.back()

• ravshanlik darajasining kob qiymatiga aylandi.
• Rozzhovujemo
• Kutubxonani qanday ulash mumkin, men hayronman, siz uni dumbadan ko'rishingiz mumkin.

Endi qoidalarning ma'nosini tushuntiramiz.

Avvalo, siz tiniqlikni muammosiz o'zgartirish usullarini aniqlashingiz kerak, jarayonga rioya qiladigan qoidalarni aniqlashingiz kerak: siz chekka va oxirgi tiniqlikni aniqlashingiz kerak, keyin esa, ko'pincha, soya parametrini belgilang. Bu suyuqlikni idrokni o'zgartirish jarayoniga kiritadi.

Shuni ham ta'kidlashni istardimki, ko'rinishning oddiy o'zgarishi uchun (qo'shimcha o'zgarish o'rniga) psevdoselektor mos keladi. : suring, bu sichqonchani yangi sichqoncha ustiga olib kelganda elementning uslublarini aniqlash imkonini beradi.

E'tibor bering, rasm A elementining o'rtasiga joylashtirilgan. O'ng tomonda, Internet Explorer 6-versiyagacha bo'lganligi sababli, psevdoselektor mavjud: hover. faqat CSS tomonidan talab qilinadigan elementlar yo'qligi aniq (vaziyat IE7 da tuzatilgan).

IE-da tushuncha va tishli matn

Windows XP ning chiqarilishi bilan ekran shriftlari yordamida tekislandi ClearType, va shu bilan birga, bu tekislash usulini qo'llashda IEda nojo'ya ta'sirlar. Natijada, agar ClearType antialiasing usuli yoqilganda matnli elementning ko'rinishi bloklansa, matn odatdagidek ko'rsatilishini to'xtatadi (qalin matn - jasur , masalan, ikkita, turli xil artefaktlar paydo bo'lishi mumkin, masalan, rasmning ko'rinishida, tirqishli matn). Vaziyatni to'g'irlash uchun IE uchun fon rangini, CSS quvvatini o'rnatishingiz kerak