Hack CSS untuk Microsofts Edge (Spartan)

microsft-edge-eko-pramono

Mas Pram – Assalamualaikum, semoga pembaca dalam keadaan sehat selalu. Sebelum membahas judul diatas, saya mohon maaf untuk keterlambatan membalas komentar pada setiap postingan blog ini, ataupun melalui media sosial saya, dikarenakan memang ditahun 2018 ini saya kurang aktif untuk menulis di blog. Namun, jika ingin komentar atau pertanyaan anda cepat saya respon silahkan hubungi melalui whatsapP, nomor kontak ada di paling bawah postingan ini. Terimkasih.

Sesuai judul diatas, maka saya akan menjelaskan mengenai CSS untuk web browser Microsoft Edge. Mengapa microsoft edge? bukannya web browser ini sudah ketinggalan, seperti saudara kandungnya yakni Internet Explorer. Awalnya saya juga menganggapnya seperti itu, di jaman ini siapa yang masih menggunakan internet explorer ataupun microsft edge. Namun anggapan itu terbantahkan, dengan saya memperoleh banyak pengetahuan di tempat saya bekerja dengan mayoritas mempunyai klien dari daratan eropa. Diluar sana, di eropa mayoritas hampir seperempat pengguna web broser menggunakan internet explorer dan microsft edge untuk berselacar di internet. Terkadang kita membuat script css hanya untuk Chrome dan Firefox.

Nah, kali ini saya akan membagi bagaimana mengatasi css yang terkadang tidak terbaca ataupun tidak berfungsi untuk kedua browser bersaudara ini. Berikut ini penjelasannya.

 

These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them.

 

/* Microsoft Edge Browser 12+ (All) – @supports method */

@supports (-ms-ime-align:auto) {
.selector { property:value; }
}

/* Microsoft Edge Browser 15+ – @supports method */

@supports (-ms-ime-align:auto) and (-webkit-text-stroke:initial) {
.selector { property:value; }
}

/* Microsoft Edge Browser 14+ – @supports method */

@supports (-ms-ime-align:auto) and (not (-ms-accelerator:true)) {
.selector { property:value; }
}

/* Microsoft Edge Browser 14 – @supports method */

@supports (-ms-ime-align:auto) and (not (-ms-accelerator:true)) and (not (-webkit-text-stroke:initial)) {
.selector { property:value; }
}

/* Microsoft Edge Browser 14- – @supports method */

@supports (-ms-ime-align:auto) and (not (-webkit-text-stroke:initial)) {
.selector { property:value; }
}

/* Microsoft Edge Browser 12 */

@supports (-ms-accelerator:true) and (not (color:unset)) {
.selector { property:value; }
}

Nah, script diatas bisa anda coba sendiri mana yang sesuai dengan keinginan, semoga bermanfaat, dan terimakasih.

Jika ada masalah atau pertanyaan, silahkan hubungi admin melalui : Facebook | WA { +6285273357370 }

Advertisements

Cara Menambah Custom Class di Item Menu Wordpress

MasPram – Pada artikel ini saya akan membahas mengenai bagaimana cara menambah custom class di item menu wordpress. Ini berdasarkan pertanyaan pengunjung blog ini melalui whatsapp. Pada masalah yang terjadi ketika membuat menu maka hanya class default menu saja yang ada, bagaimana untuk menambahkan class lagi?

Sebenarnya pengaturan untuk menambahkan custom class sudah ada, namun disembunyikan atau tidak ditampilkan pada pengaturan menu yang kita buat seperti gambar dibawah ini:

menu-wordpress

Lalu bagaimana cara untuk memunculkan pengaturan menambah custom class di wordpess? Berikut ini langkah-langkahnya:

Dashboard > Appearance > Menus, klik Screen Options

screen-option-wordpress

Maka akan muncul list pengaturan menu, ceklis pada CSS Classes

css-class-menu-wordpress

Buka atau expand menu yang anda buat, maka akan muncul otomatis untuk menambahkan custom class menu

add-custom-class-wordpress

 

Semoga bermanfaat 🙂

 

Cara Mengubah Huruf Kapital (Case) menggunakan CSS

alphabet-upper-and-lower-b&w-mdMas Pram – Kali ini saya akan membahas mengenai bagaimana caranya merubah huruf kapital (Case) menggunakan CSS. Namun dalam pembahasan lebih detailnya kita akan merubah teks kapital menjadi huruf kecil semua, dan sebaliknya. Bagaimana caranya? Berikut ini penjelasannya:

 

Contoh penggunaan di HTML


Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Script/Kode CSS untuk merubah huruf kapital


p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Demo