Veb-sahifalarni chop etish uchun qanday…

Sahifalarni chop etish uchun optimallashtirish uchun CSS media so'rovlar print turi bilan ishlatiladi.

Keraksiz elementlarni yashirish: Chop etishda ko'rsatilmasligi kerak bo'lgan elementlar (navigatsiya, footerlar, reklama bloklari, tugmalar) yashiriladi.
```
/* Chop etishda yashirish */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Yashirilgan kontentni ko'rsatish: Agar ekran uchun yashirilgan, lekin chop uchun kerak bo'lgan kontent (masalan, linklarning to'liq URL'lari) bo'lsa, uni ko'rsatish mumkin.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Linkdan keyin URL qo'shadi */
  }
}
```

Stilni tiklash: Ekran uchun maxsus stilni tiklash: fon rasmlari/ranglar, soya, bo'sh joylar, shrift o'lchamlari.

@media print {
  body {
    background: none !important; /* Fon rasmini/rangini olib tashlaydi */
    color: #000; /* Yaxshi o'qilishi uchun qora matn */
  }
  * {
    box-shadow: none !important; /* Soyalarni olib tashlaydi */
    text-shadow: none !important; /* Matn soyalarini olib tashlaydi */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Sahifa boshida/oxirida yolg'iz satrlarni oldini oladi */
    widows: 3; /* Paragraf boshida/oxirida yolg'iz satrlarni oldini oladi */
  }
}

Sahifa bo'linmalarini boshqarish: page-break-before, page-break-after, page-break-inside xususiyatlaridan foydalanib, sahifa bo'linmalarini boshqarish.

@media print {
  article h2 {
    page-break-before: always; /* Yangi bo'lim yangi sahifadan boshlanadi */
  }
  ul, ol {
    page-break-inside: avoid; /* Ro'yxat ichida bo'linmalarni oldini oladi */
  }
}

Rasmlar va jadvallarni optimallashtirish: Rasmlarning o'lchamini kichraytirish, jadvallarni to'g'ri ko'rsatishni ta'minlash.

@media print {
  img {
    max-width: 100% !important; /* Rasm sahifa kengayishini oldini oladi */
  }
  table {
    width: 100% !important; /* Jadval sahifa kengligida */
    border-collapse: collapse; /* Kataklar orasidagi bo'shliqni olib tashlaydi */
  }
  th, td {
     border: 1px solid #ccc; /* Kataklarga chegaralar qo'shadi */
  }
}

Maxsus chop stilini yaratish: Alohida CSS fayli yaratish va uni media so'rovi bilan ulash mumkin.

<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

Test qilish: Natijani brauzerda "Chop qilish uchun oldindan ko'rish" funksiyasi yordamida sinab ko'rish muhimdir.

Veb-sahifalarni chop etish uchun qanday optimallashtirish mumkin?