/** * ============================================== * Barkod Yakalama Performans Optimizasyonu CSS * ============================================== * * KULLANIM: * Bu CSS dosyasını sayfanızın bölümüne şu şekilde dahil edin: * * * PERFORMANS ÖZELLİKLERİ: * - CSS Containment kullanarak layout optimizasyonu * - Hardware acceleration için minimal transform * - Font rendering optimizasyonu * - Responsive design * - Dark mode desteği * - Accessibility özellikleri * - Print optimizasyonu * * @version 1.0 * @format */ /* ========= TEMEL STİLLER ========= */ /* Malzeme kodu stili */ .malzemekodu { font-weight: 600; margin-bottom: 0.5rem; display: inline-block; color: #2c3e50; } /* Ana container - Flexbox optimizasyonu */ .barkod-container { display: flex; flex-wrap: wrap; gap: 4px; contain: layout; /* CSS Containment - performans artırımı */ will-change: auto; /* Gereksiz GPU işlemlerini engelle */ } /* Grup container - Inline-flex optimizasyonu */ .grup-container { display: inline-flex; margin: 1px; white-space: nowrap; contain: style layout; /* CSS Containment */ } /* ========= BADGE OPTİMİZASYONU ========= */ /* Temel badge stili - Inline stiller yerine CSS sınıfları */ .badge-parca { font-size: 0.7rem; padding: 0.15rem 0.3rem; margin-right: 1px; font-weight: 400; border-radius: 0.25rem; display: inline-block; line-height: 1.2; text-align: center; vertical-align: baseline; border: none; box-sizing: border-box; } /* Durum sınıfları - !important kaldırarak CSS specificity optimize et */ .badge-parca.sevk-edilmis { background-color: #ffc107; color: #212529; } .badge-parca.sevk-edilmemis { background-color: #28a745; color: #ffffff; } .badge-parca.eksik { background-color: #dc3545; color: #ffffff; } /* ========= PERFORMANS OPTİMİZASYONLARI ========= */ /* Reflow/Repaint azaltmak için */ .barkod-container, .grup-container, .badge-parca { transform: translateZ(0); /* Hardware acceleration için minimal transform */ backface-visibility: hidden; /* 3D işlemlerini devre dışı bırak */ } /* Font rendering optimizasyonu */ .badge-parca { font-display: swap; /* Font yükleme optimizasyonu */ text-rendering: optimizeSpeed; /* Hızlı metin rendering */ } /* ========= RESPONSIVE OPTİMİZASYON ========= */ /* Mobil cihazlar için */ @media (max-width: 768px) { .badge-parca { font-size: 0.65rem; padding: 0.1rem 0.25rem; } .barkod-container { gap: 2px; /* Mobilde daha az boşluk */ } } /* Tablet cihazlar için */ @media (min-width: 769px) and (max-width: 1024px) { .badge-parca { font-size: 0.68rem; padding: 0.12rem 0.28rem; } } /* ========= PRINT OPTİMİZASYONU ========= */ @media print { .badge-parca { background-color: transparent !important; color: #000 !important; border: 1px solid #000; font-size: 0.6rem; } } /* ========= DARK MODE DESTEĞI ========= */ @media (prefers-color-scheme: dark) { .badge-parca.sevk-edilmis { background-color: #f39c12; color: #2c3e50; } } /* ========= ACCESSIBILITY OPTİMİZASYONU ========= */ /* High contrast mode */ @media (prefers-contrast: high) { .badge-parca { border: 2px solid currentColor; } } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { .badge-parca, .grup-container { transform: none; } }