Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Class dan ID

Ya, itu bedanya, [b]class[/b] bisa dipake utk styling [b]beberapa elemen[/b] dlm [b]satu page[/b], sementara [b]id[/b] hanya bisa dipake untuk [b]satu elemen[/b] dalam [b]satu page[/b].

Comments

  • Ya, itu bedanya, class bisa dipake utk styling beberapa elemen dlm satu page, sementara id hanya bisa dipake untuk satu elemen dalam satu page.
  • mas_ab bisa kasih contohnya ndak ?? coz masih belum ngeh neh ....
    sory kalo nge-repotin
  • #id hanya digunana untuk satu kali saja. alias unique. ngga boleh dipake di dua element dalam halaman yg sama.
    contoh:

    file index.html:
    <div id="red"></div>
    <span id="red"></div>

    penulisan diatas akan berakibat pada tidak validnya dokumen XHTML tersebut karena pengulangan dua id yg sama.

    kalau class beda lagi. bisa diulang2 di element mana pun karena class tidak bersifat unique :D
    mudah2an jadi mudeng :D
  • @yamazaki
    Tapi mas kenapa tampilan di browser masih wajar (ga ada yang aneh) untuk penggunaan id yang sama di element HTML ???

    misal :
    <style type="text/css">
    #red {color: red;}
    </style>

    <div id="red">aaaaaaaaa</div>
    <div id="red">bbbbbbbbb</div>
    <p id="red">cccccccccccc</p>

    tampilan teks di browser koq masih sama-sama merah ga ada yang bikin beda (bingung soal tampilan di browser) ???? :(
  • karena browser itu sifatnya permisif banget. Tampilan mungkin aja gak kepengaruh tapi coba page yg pake kode di atas itu di validasi, pasti gagal
  • Originally posted by khiwie1979
    @yamazaki
    Tapi mas kenapa tampilan di browser masih wajar (ga ada yang aneh) untuk penggunaan id yang sama di element HTML ???

    misal :
    <style type="text/css">
    #red {color: red;}
    </style>

    <div id="red">aaaaaaaaa</div>
    <div id="red">bbbbbbbbb</div>
    <p id="red">cccccccccccc</p>

    tampilan teks di browser koq masih sama-sama merah ga ada yang bikin beda (bingung soal tampilan di browser) ???? :(

    yup sprti yg mas_ab bilang, browser sih cuek2 saja. yg jadi masalah adalah pada saat validasi. pasti akan terjadi error :D
    kalo anda peduli pada validasi, ya ganti aja. kalo ga peduli, cuekin aja :D
  • oo, jadi meskipun kita mempunyai dua elemen yg tampilannya mau dibikin sama persis, kita ga boleh memberikan ID yang sama ya? baru tau saya..
  • Thank's mas buat penjelasannya ... :)
    Tapi ini ada satu lagi yang mau ta tanyain, apa maksud dari CSS yang kaya dibawah ini :

    div > p
    {
    color:red;
    }

    apakah CSS diatas valid and apa semua browser nge-dukung penulisan CSS kaya diatas ???
  • Originally posted by khiwie1979
    Thank's mas buat penjelasannya ... :)
    Tapi ini ada satu lagi yang mau ta tanyain, apa maksud dari CSS yang kaya dibawah ini :

    div > p
    {
    color:red;
    }

    apakah CSS diatas valid and apa semua browser nge-dukung penulisan CSS kaya diatas ???

    kode css di atas sama kayak:

    div p
    {
    rule
    }

    di mana mentargetkan tag p di dalam tag div.
    <div> <p></p> </div>

    soal valid tidak validnya saya sendiri belum coba penggunaan selector seperti itu. jadi saya lom bisa jawab. mungkin kang RisK atau Jeng Yeni isa bantu :D
  • wah, sual selector saya kurang paham. saya pahamnya bahwa selector itu ga jalan di IE 6 :D
  • Originally posted by khiwie1979
    Thank's mas buat penjelasannya ... :)
    Tapi ini ada satu lagi yang mau ta tanyain, apa maksud dari CSS yang kaya dibawah ini :

    div > p
    {
    color:red;
    }

    apakah CSS diatas valid and apa semua browser nge-dukung penulisan CSS kaya diatas ???


    Selector di atas valid tapi akan diabaikan oleh IE sebelum IE7.

    Child selector spt di atas berarti:
    "untuk semua p yang ada-di-dalam/menjadi-child-dari div" & struktur htmlnya spt yg ditunjukin sama yamazaki.

    Child selector tsb juga sering dipake utk ngakalin misahin style yg khusus utk browser selain IE dari base - style.

    Maksudnya gini, misalnya, situ punya satu file css, dipake utk Firefox & IE. Ternyata, IE bikin tampilan paragraph yg berbeda dgn Firefox. Kalo tampilan di IE dibenerin, malah tampilan di FF yg ngaco. Salah satu cara yg gampang adalah bikin 2 style utk p, satu untuk IE , satu utk FF. File css nya jadi gini:

    div p{
    /*some stuff for IE & FF*/
    }

    div > p {
    /*special stuff for browsers other than IE6 and below*/
    }

    tapi,
    gw gak nyaranin hack kaya gini. Memang lebih sederhana & gampang tapi masalahnya IE7 bakal bisa baca child selector ( > ) jadi hack di atas gak berguna lagi.

    Cara paling aman utk bikin css yg kompatibel dgn IE maupun Gecko adalah dgn menggunakan MS Conditional Comment yg hanya bisa dibaca oleh IE. Cara ini agak ngerepotin karena perlu file css lain yg khusus utk IE & isinya adalah css utk ngatasin bug di IE. Sayangnya gak ada cara lain yg lebih simpel.

    Sekedar tambahan,
    Selector lain yg sering digunakan:
    Attribute Selector

    div[id=content"]{

    /*some stuff*/

    }

    Adjacent Sibling Selector

    div + p {
    /*some stuff*/
    }
  • gak harus outer css kan..
    <!--[if lt IE 6]><div style="border-left : solid 1px rgb( 103, 103, 103 );"><![endif]-->
  • Originally posted by hadi_mulyadi
    gak harus outer css kan..
    <!--[if lt IE 6]><div style="border-left : solid 1px rgb( 103, 103, 103 );"><![endif]-->

    laduh kalau ada 50 kayak gitu masa harus satu2 mas :D trus tujuan CSS buat apa dong hehe
  • keuntungan outer css:

    1. css hanya akan didownload ketika halaman dibuka pertama kali dan selanjutnya akan disimpan di cache sehingga ukuran file html akan lebih kecil
    2. atribut "style" bukan lagi atribut standar w3c

    begitulah kira-kira yang pernah saya baca.
  • "..laduh kalau ada 50 kayak gitu.."
    mudah nih jawabannya:
    kalo sampai ada 50 gitu ya kelewatan dong mas developernya, oon apa pegimana, harus belajar CSS lagi tuh

    "..atribut "style" bukan lagi atribut standar w3c.."
    untung.. masuk conditional, jadi kan sama W3C cuman dibaca comment tag. ha.. ha.. ha.. ngeles. tapi ya.. mengkodisionalkan style div memang paling efisien gw rasa.

    maksud gw nyaranin kek gitu karena yang namanya style itu murni browser intepretation, CSS Hack itu sudah jamak, tapi kalo kebanyakan.. oon namanya.
  • Originally posted by hadi_mulyadi
    "..laduh kalau ada 50 kayak gitu.."
    mudah nih jawabannya:
    kalo sampai ada 50 gitu ya kelewatan dong mas developernya, oon apa pegimana, harus belajar CSS lagi tuh

    ck ck ck

    Bukan 50nya yg jadi masalah, tapi inline style nya itu lho ... misalnya, satu page ada 15 div semuanya punya style sama & butuh penyesuaian di IE, kalo pake inline style berarti, butuh 1 base style + 15 inline style jadi total = 16. Itu kalo satu page, kalo 20?

    Kalo pake external / outer css tinggal tentuin class nya, pake 1 base style + 1 conditional comment , total = 2 . Ukuran file juga lebih kecil. Plus, lebih maintainable.
  • harusnya Anda sudah mengerti sendiri bagaimana bisa Anda menciptakan ".. satu page ada 15 div semuanya punya style sama & butuh penyesuaian di IE, kalo pake inline style berarti, butuh 1 base style + 15 inline style jadi total = 16." kalau pengetahuan CSS Anda kurang. Bukan maksud saya merendahkan atau maksud saya meyombongkan diri. Yang saya maksud hanya ada banyak jalan dan tekad kok untuk menyiasati keinginan dan tidak perlu se***** itu (bukan ke Anda lo atau kesiapapun di sini).

    Pengalaman saya berCSS memang sangat sulit untuk mengakomodasi seluruh intepretasi browser akan CSS, tapi jangan putus asa

    dengan demikian saya tidak pernah mentabukan memakai outer atau inline.
  • fungsi utama CSS adalah "separating content from layout" . Pemakaian inline css tidak sesuai dgn fungsi utama ini.

    Memang pemakaian inline ato external css terserah si pembuat web. Yg pasti inline css tidak termasuk dlm best practices dan sebaiknya hanya digunakan jika tidak ada jalan lain (temporary elements, testing, etc..);
    Inline Styles Are Not Best Practice

    Inline styles, while they have a purpose, are not the best way to maintain your Web site. They go against every one of the above benefits:

    1. Inline styles don't separate content from design
    In fact, inline styles are exactly the same as embedded font tags and other design tags that we're trying to stop using. The styles only affect the exact tag they are applied to, and while that might give you more control, it also makes other aspects of your design and development more difficult.
    2. Inline styles cause more maintenance headaches
    When you're working with style sheets, it can sometimes be very difficult to figure out where a style is being set. When you add a mixture of inline, embedded, and external styles and you have even more locations to look. And if you work on a Web design team or have to redesign or maintain a site built by someone else, then you're going to have even more trouble. Then, once you find the style and get rid of it, you'll have to get rid of it on every element on every page where it's been placed. Which can increase your maintenance work astronomically.
    3. Inline styles are not as accessible
    While a screen reader or other assistive device might be able to handle the attributes and tags effectively, some of the older devices don't and can result in some strange Web pages. Plus, the extra characters and text can affect how your page is viewed by a robot such as a search engine, so your page optimization would not do as well as a page with external style sheets.
    4. Inline styles make your pages bigger
    If you set a style on every paragraph on your site, you can do it once with like 6 lines of code and an external style sheet. But if you do it with an inline style, you'll have to add those styles to every paragraph of your site. If you have 5 lines of CSS, that's 5 lines multiplied by every paragraph on your site. That bandwidth can add up in a hurry.

    http://webdesign.about.com/od/css/a/aa073106.htm
    Inline CSS

    Inline CSS is the least flexible of the three options listed above. When applying inline CSS you are styling your elements right inside the code. You can see an example of inline styling in Listing 1 below:
    &lt;p style=&quot;margin: 20px;&quot;&gt;My paragraph text&lt;/p&gt;
    
    Listing 1: An inline style

    The inline style in Listing 1 above is highlighted. Why is this method a poor one? The answer to that is simple, the style we have applied to that p element is only affecting that p element. This means that every single time we use a p element we will need to write an inline style to force the 20px margin we want to add to our paragraphs.

    This situation is further complicated when we need to make changes to our code. Let's say my client wants to reduce the margins on his paragraphs from the 20 pixels we have set to 15 pixels. The site may contain 1000 pages, to complete the client's request we would need to find and change every single instance of that inline style on every page within the site; a job that could take hours.

    http://www.communitymx.com/content/article.cfm?cid=FAF76
    External Style Sheets

    Particularly for SEO considerations, the STYLE tag should be avoided where possible. Style sheets should be externally linked, and only imported when a special requirement needs to be met, such as Mac/IE consideration.

    http://www.usabilityandbranding.com/experts/lessons/CSSBestPractices.php
    As you might expect,inline styles save no bandwidth—indeed, they add bandwidth to every page that uses them and are generally as wasteful as <font> tags in that regard.

    "Designing with Web Standards", Jeffrey Zeldman, Chapter 9
    There is a fourth method of applying CSS that we need to talk about as well—inline styles. The style attribute can be added to almost any element, allowing CSS rules to be applied directly at the element level, as shown in Method D.

    Since inline styles are at the lowest level possible in the cascade, they will override any styles that are declared in external style sheets, or rules held in the <style> element in the <head> of the document.

    This can be a simple way of adding style here and there to documents, but it comes at a price.

    Style Tied to Markup
    If we rely on Method D too much for adding style to documents, we're not really separating our content from our presentation. Going back to make changes means going directly to the markup, when keeping CSS in a separate file makes for easier maintenance.

    Abusing Method D is almost like littering your markup with <font> tags and other presentational gobbledygook. These design details always belong in a separate place.

    Use with Caution
    There are certainly real-world uses for inline styles—and they can be a savior in a pinch, where adding style to a document is necessary, but accessing an external file or the <head> of the document is impossible; or additionally, if they are merely temporary styles, not meant to be shared with other elements on the page.

    For instance, if there is one page that will be announcing a bake sale on your website that will eventually be taken down afterwards, and you'd like this particular page to have unique styles, you may opt to embed these unique rules, rather than adding them to a permanent style sheet.

    Just proceed with caution. Know that these styles can't be modified easily, across an entire page or site.

    "Web Standards Solutions", Dan Cederholm, Chapter 10
  • Originally posted by hadi_mulyadi
    "..laduh kalau ada 50 kayak gitu.."
    mudah nih jawabannya:
    kalo sampai ada 50 gitu ya kelewatan dong mas developernya, oon apa pegimana, harus belajar CSS lagi tuh

    waduh mas, kita bicara bukan satu halaman web doang lho. saya kemaren ini baru2 aja ngedesign webapp dengan page html puluhan. masing2 page ada aja yg bentrok ama IE. maka masing2 page tsb harus dikasih hack.

    kalau menggunakan ide dari mas hadi dengan inline style, maka saya harus memberikan style yang nempel dengan document katakan saja 2 - 3 ( katakanlah ada beberapa margin atau padding yang berbeda )
    nah kalau saya punya 30 page x 3 = 90 inline style ?

    bukannya lebih enak kalau comment hack diapply ke dalam external CSS ?
    saya sendiri udah jarang pake inline style karena tidak sama dengan tujuan awal CSS :D
    tapi kadang2 kepake sih kalo mendesak
  • sori gw gak sempet liat kutipan artikel inggris poster di sini, menurut gw style is style, inline atau outer tidak ada satupun yang lebih utama dari yang lain. kalau lu pada merasa W3C tidak merekomendasikan inline, gw minta bukti kutipan langsung dari draft W3C.
    bukannya gw mati-matian membela inline, cuman gw merasa aneh elu-elu kelihatannya mentabukan inline, menurut gw sampai sekarang W3C masih merekomendasikan DOM, Document Object Model. Dan kalau lu paham DOM hierarchy, apa gw salah kalau gw pikir DOM itu salah satu di terapannya memakai inline style. jadi sekali lagi style is style.

    note. sebenernya gw dah mo nulis ini waktu mas yeni mempersoalkan outer CSS yang cache friendly, gw waktu itu langsung berpikir tentang kebutuhan style yang dinamis.

    o iya, situs gw sendiri (signatur) satu halamannya ada inline style sebanyak 5 kalo gak salah, sebagian CSS Hack (yang awalnya kita masalahkan), sebagian lagi untuk HTML DOM belum termasuk outer JS nya (buat AJAX) yang tentu saja perlu inline style. (don't worry outer CSS juga ada kok); jumlah halaman satu situs gak pernah ngitung, mungkin ada ribuan ha.. ha.. ha.. emang gw pikirin orang gw bikinnya dengan object oriented kok, gw cuman bikin rupa satu halaman untuk dicontek semua halaman. yang terakhir, kalau lu mempermasalahkan CSS inline gw, lu liat ndiri buatan elo sono ke jingsaw, CSS gw bukan cuman valid tapi juga no error or warning

    note. sori buat moderator apalagi topic starternya, lagian gw cuman nyaranin outer css aja berbuntut panjang
  • Gpp mas, ya.. hitung-hitung buat nambah ilmu + referensi :D, and sepertinya dunia CSS masih luas untuk di jelajahi.

    Belajar lage deh ... :]
  • Mumpung lagi ngobrolin CSS nih ..

    Bisa ngga sih tag CSS yang sudah ke load di browser dilacak isinya kira-kira apa ? Kalo ngelacak suatu function suatu javascript kan tinggal window.namafunction. Kalo untuk CSS tag bisa ngga yah ?
  • maksudnya gimana mas rindu? kenapa ga dibuka saja file css-nya?
  • ngomomgin HTML DOM kalee...

    document.getElementById( 'nama_id_div' ).style.color
Sign In or Register to comment.