CSS dan CSS3 tutorial

# Flexbox

Flexbox adalah cara baru untuk konten struktur di CSS3. Ini menyediakan cara yang indah untuk membuat website responsif yang bekerja dengan baik dalam berbagai ukuran layar dan konten order.

Ada 3 langkah sederhana untuk menggunakan Flexbox :

• Sesuaikan tata letak kontainer yang berbeda dengan menggunakan flex-direction
• Mengkonversi kontainer induk ke kontainer Flex menggunakan display: flex;
• Menyesuaikan tata letak item dalam kontainer dengan menggunakan properti seperti justify-content, align-items dan sebagainya.

Flexbox memungkinkan Anda untuk secara efisien lay out, menyelaraskan, dan menyesuaikan ruang di antara elemen halaman yang berbeda, bahkan jika Anda tidak tahu ukuran yang tepat mereka. Sebaliknya, item dan kontainer bersifat dinamis, dan akan "Flexible" untuk mengisi ruang yang tersedia dengan baik.

1. main-axis : Poros utama wadah Flex Flex semuanya ditata. Perlu diingat bahwa ini bisa horizontal atau vertikal tergantung pada flex-direction Properti.
2. main-start | main-end : Item Flex ditempatkan dalam wadah dari main-start ke main-end
3. main size : Dimensi utama item Flex, yang dapat berupa lebar atau tingginya, bertindak sebagai ukuran utama item.
4. cross axis : Sumbu yang tegak lurus terhadap sumbu utama. Arah sumbu silang tergantung pada arah sumbu utama.
5. cross-start | cross-end : Garis Flex dan item ditempatkan di wadah Flex mulai dari cross-start ke sisi cross-end.
6. cross size : Dimensi silang item (lebar atau tinggi) berfungsi sebagai ukuran item silang.

# Grid Layout

CSS grid layout, hanya dikenal sebagai grid, adalah skema tata letak yang terbaru dan yang paling kuat di CSS. Hal ini didukung oleh semua browser utama dan menyediakan cara untuk posisi item pada halaman dan memindahkan mereka di sekitar.
Ini dapat secara otomatis menetapkan item ke area, ukuran dan mengubah ukurannya, mengurus pembuatan kolom dan baris berdasarkan pola yang Anda tentukan, dan melakukan semua perhitungan menggunakan unit fr yang baru diperkenalkan.

# Grid vs Flex

• Flex adalah satu dimensi baik horisontal atau vertikal, sementara grid adalah dua dimensi, yang artinya Anda dapat memindahkan elemen dikeduanya baik horisontal ataupun vertikal.
• Di grid, kita menerapkan gaya tata letak ke kontainer induk dan bukan item.
  Sedangkan Flex, di sisi lain, menargetkan item Flex untuk mengatur properti seperti flex-basis, flex-grow, dan flex-shrink
• Grid and Flex are not mutually exclusive. You can use both on the same project.

# Mengenai grid

• Anda dapat dengan mudah memiliki grid 12 kolom dengan satu baris CSS. grid-template-columns: repeat(12, 1fr)
• Grid memungkinkan Anda memindahkan segala sesuatu ke segala arah. Tidak seperti Flex, di mana Anda dapat memindahkan item baik secara horisontal (flex-direction: row) atau vertikal (flex-direction: column) dan tidak keduanya pada saat yang sama-grid memungkinkan Anda memindahkan item kisi apa pun untuk area kisi standar pada halaman. Item yang Anda Pindahkan tidak harus bersebelahan.
• Dengan CSS grid, Anda dapat mengubah urutan elemen HTML hanya menggunakan CSS. Memindahkan sesuatu dari atas ke kanan, memindahkan elemen yang ada di footer ke sidebar dll. Daripada memindahkan <div> dari <footer> ke <aside> dalam HTML, Anda hanya dapat mengubah penempatan dengan grid-area dalam stylesheet CSS.

# Memeriksa kompatibilitas browser dengan @supports

Idealnya, ketika Anda membangun sebuah situs, Anda akan desain dengan grid dan menggunakan Flex sebagai fallback. Anda dapat mengetahui apakah browser Anda mendukung grid dengan @support aturan CSS (alias fitur query).

Berikut ini contohnya :

.container {
  display: grid; /* display grid by default */
}

@supports not (display: grid) { /* if grid is not supported by the browser */
  .container {
    display: flex; /* display flex instead of grid */
  }
}

# Persiapan

Untuk membuat elemen apapun dengan grid, Anda perlu menetapkan display properti untuk grid seperti :

.conatiner {
  display: grid;
}

Dan itulah. Anda baru saja membuat .container Grid. Setiap elemen di dalam .container otomatis menjadi item grid.

# Mendefinisikan template

Baris dan kolom

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;

Area...

grid-template-areas: 
  "a a a a"
  "b c d e"
  "b c d e"
  "f f f f";

atau :

grid-template-areas:
  "header header header header"
  "nav main main sidebar";

# Grid Area

Berikut adalah beberapa contoh kode tentang bagaimana mendefinisikan dan menetapkan area grid :

.site {
  display: grid;
  grid-template-areas: /* applied to grid container */
    "head head" /* you're assigning cells to areas by giving the cells an area name */
    "nav  main" /* how many values kind of depends on how many cells you have in the grid */
    "nav  foot";
}

.site > header {
  grid-area: head;
}

.site > nav {
  grid-area: nav;
}

.site > main {
    grid-area: main;
}

.site > footer {
    grid-area: foot;
}

The fr unit

CSS dan CSS3 Grid Tutorial memperkenalkan unit fr baru, yang merupakan singkatan dari (fraction). Hal yang baik tentang menggunakan unit fr adalah bahwa hal itu mengurus perhitungan untuk Anda. Menggunakan fr menghindari masalah margin dan padding. Dengan % dan em dll itu menjadi persamaan matematika ketika menghitung grid-Gap. Jika Anda menggunakan unit fr, maka secara otomatis akan menghitung ukuran kolom dan Talang dan menyesuaikan ukuran kolom yang sesuai. Ditambah tidak akan ada kesenjangan pendarahan di akhir baik.

Example :

* Mengubah urutan elemen berdasarkan ukuran layar
Jika Anda ingin memindahkan footer ke bawah pada layar kecil dan ke kanan pada layar yang lebih besar, dan ada banyak elemen HTML lainnya di antara keduanya.
Solusi sederhananya adalah mengubah grid-template-areas Berdasarkan ukuran layar. Anda juga dapat mengubah jumlah kolom dan baris berdasarkan ukuran layar juga. Ini adalah alternatif yang jauh lebih bersih dan sederhana untuk bootstrap sistem grid (col-xs-8 col-sm-6 col-md-4 col-lg-3).

.site {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title title"
    "main header"
    "main sidebar"
}

@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
  .site {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
      "title title title"
      "main header header"
      "main sidebar footer"
  }
}

# Selector Syntax

Selector disusun dalam urutan tertentu membangun aturan untuk elemen target. Contoh :

/* selects anchor tags */
a { 
    color: orange;
}

/* selects elements with hero class */
.hero {
    text-align: center;
}

Jenis Selector

• Tipe Deskripsi adalah jenis tipe Selector dan tag nama yang digunakan untuk memilih elemen seperti h1 atau a
• Universal Selector berlaku untuk semua elemen.
• div * cocok dengan semua elemen dalam elemen div.
• Atribut selector adalah Selector yang menargetkan elemen berdasarkan atribut mereka (dan secara opsional, nilainya).
• h1[title] memilih elemen h1 dengan title atribut.
• Selector ID adalah selector yang menggunakan ID untuk elemen target. #logo memilih elemen dengan logo sebagai ID.
• Selector pseudo-class adalah selector khusus yang menargetkan elemen berdasarkan keadaan mereka. a:hover selector berlaku gaya ketika pointer melayang di atas link.

# CSS Display

Properti Display menentukan jenis kotak yang digunakan untuk elemen HTML. Ini memiliki 20 nilai kata kunci yang mungkin. Yang umum digunakan adalah :

 .none             {display: none}
    .block            {display: block}
    .inline-block     {display: inline-block}
    .inline           {display: inline}
    .flex             {display: flex}
    .inline-flex      {display: inline-flex}
    .inline-table     {display: inline-table}
    .table            {display: table}
    .inherit          {display: inherit}
    .initial          {display: initial}

display:none Properti sering dapat membantu ketika membuat website responsif. Misalnya, Anda mungkin ingin menyembunyikan elemen pada halaman sebagai ukuran layar menyusut dalam rangka untuk mengimbangi kurangnya ruang.
display:none tidak hanya akan menyembunyikan elemen, tetapi semua elemen lain pada halaman akan berperilaku seolah-olah elemen tersebut tidak ada.

Ini adalah perbedaan terbesar antara properti ini dan visibility: hidden properti, yang menyembunyikan elemen tetapi menyimpan semua elemen halaman lain di tempat yang sama seperti yang akan muncul jika elemen tersembunyi terlihat.

Nilai kata kunci ini dikelompokkan ke dalam enam kategori :

• <display-inside>
• <display-outside>
• <display-listitem>
• <display-box>
• <display-internal>
• <display-legacy>