Sabtu, 12 November 2011

6 Kunci Memahami modern berbasis CSS Layouts

Banyak dari CSS adalah cukup sederhana dan, saya kira, cukup mudah bagi kebanyakan orang untuk memahami. There's font styles, margin, padding, color and what not. Ada font yang gaya, margin, padding, warna dan apa yang tidak. But there's a wall that people will run into... Tapi ada dinding yang orang akan lari ke ... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser. titik di mana sejumlah elemen kunci perlu datang bersama-sama untuk menciptakan sebuah layout berbasis CSS yang solid yang konsisten lintas-browser.
These are the six things that will help people get over the hump. Ini adalah enam hal yang akan membantu orang mengatasi punuk.

Box Model Kotak Model

At the very core of it, is an understanding of the box model within CSS. Pada inti dari itu, adalah pemahaman tentang model kotak dalam CSS. Sure, you may know your margin and padding but what happens when elements start to interact with each other. Tentu, Anda mungkin tahu margin dan padding, tetapi apa yang terjadi ketika elemen mulai berinteraksi satu sama lain. Suddenly things that look good in one browser go all to hell in the other. Tiba-tiba hal-hal yang terlihat baik dalam satu browser pergi semua ke neraka yang lain. Consistently in working with the box model comes from understanding the difference between quirks mode and strict mode. Konsisten dalam bekerja dengan model kotak berasal dari pemahaman perbedaan antara quirks mode dan mode yang ketat. It's also a good idea to know how to hack it up for older browsers. Ini juga merupakan ide yang baik untuk mengetahui bagaimana hack itu untuk browser lama.

Floated Columns Kolom melayang

While absolute positioning was one of the first approaches that people took when attempting to replace table-based layouts, it was floating content that opened the doors of possibility. Sementara posisi absolut adalah salah satu pendekatan pertama yang orang ambil ketika mencoba untuk mengganti layout berbasis tabel, itu mengambang konten yang membuka pintu kemungkinan. Along with learning how to float, you must also learn how to clear floats so that content that follows or backgrounds will appear correctly. Seiring dengan belajar bagaimana untuk mengapung, Anda juga harus belajar bagaimana untuk menghapus mengapung sehingga konten yang berikut atau latar belakang akan muncul dengan benar.

Sizing Using Ems Ukuran Menggunakan Ems

There are two different issues at play here when it comes to sizing with ems: fonts and layouts. Ada dua isu yang berbeda pada bermain di sini ketika datang ke ukuran dengan ems: font dan layout.
With fonts, Internet Explorer 6 and lower don't allow you to resize the text when specified using pixels (px). Dengan font, Internet Explorer 6 dan lebih rendah tidak memungkinkan Anda untuk mengubah ukuran teks ketika ditentukan menggunakan pixel (px). Those with vision issues may wish to set their font size larger in order to more readily read what you've written. Mereka dengan masalah visi mungkin ingin mengatur ukuran font yang lebih besar agar lebih mudah membaca apa yang telah Anda tulis. Specifying your font sizes using ems has proven to be the popular approach to this problem. Menentukan ukuran font Anda menggunakan ems telah terbukti menjadi pendekatan yang populer untuk masalah ini. The importance of sizing text using ems is waning as users move on to better browsers. Pentingnya ukuran teks menggunakan ems adalah waning sebagai pengguna beralih ke browser yang lebih baik.
Sizing layouts with ems can also offer up a whole other avenue of flexibility. Ukuran layout dengan ems juga dapat menawarkan sebuah jalan lain seluruh fleksibilitas. When playing with text size, it can often throw an entire design out of whack. Ketika bermain dengan ukuran teks, sering kali dapat melempar seluruh desain keluar yang mendera. Styling elements using ems allow the containers of content to grow along with the text, maintaining the consistency of the design. Styling elemen menggunakan ems memungkinkan kontainer konten untuk tumbuh bersama dengan teks, menjaga konsistensi desain.

Image Replacement Penggantian image

Boring text elements dont' excite us. Elemen teks membosankan dont 'menggairahkan kita. We want to use lots of graphical flair along with gradients and glass effects. Kami ingin menggunakan banyak bakat grafis bersama dengan gradien dan efek kaca. And we want to use custom fonts; fonts that browsers just can't offer us yet. Dan kita ingin menggunakan font kustom; font yang browser tidak bisa menawarkan kita belum. Image replacement techniques allow us to replace the existing content-rich and SEO -friendly text with stylish images or Flash files with embedded fonts. Gambar teknik penggantian memungkinkan kita untuk mengganti yang ada konten yang kaya dan SEO-friendly teks dengan gambar gaya atau file Flash dengan font tertanam.

Floated Navigation Navigasi melayang

If you've mastered floating columns, the other tricky piece to the puzzle and one that is heavily used, is floated navigation. Jika Anda sudah menguasai kolom mengambang, bagian rumit lain untuk teka-teki dan salah satu yang banyak digunakan, adalah navigasi melayang. The web-standards-lovin' folk love their unordered lists of navigation and there are a myriad of ways to style them up. Rakyat web-standar-lovin 'cinta daftar mereka unordered navigasi dan ada segudang cara untuk gaya mereka.

Sprites Sprite

Like video games of yore, packing multiple images into one single image has become a popular technique to solve a couple problems. Seperti video game dahulu kala, pengepakan beberapa gambar menjadi satu gambar tunggal telah menjadi teknik yang populer untuk memecahkan masalah pasangan. The first is CSS-based rollovers. Yang pertama adalah berbasis CSS rollovers. More recently, it's been proven to be advantageous to combine multiple images — in particular background images used in image replacement techniques — into a single file. Baru-baru ini, sudah terbukti menguntungkan untuk menggabungkan beberapa gambar - di gambar latar belakang tertentu yang digunakan dalam teknik gambar penggantian - menjadi sebuah file tunggal. This reduces the number of requests your browser has to make, improving the time required to download all files from your server. Hal ini akan mengurangi jumlah permintaan browser Anda harus membuat, meningkatkan waktu yang dibutuhkan untuk men-download semua file dari server Anda.
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)