Muhtemelen bu başınıza gelmiştir. Güzelce stillendirilmiş bir bloğu — bir başlık kartı, renkli bir vurgu — kopyalayıp WeChat düzenleyicisine ya da bir CMS'ye yapıştırırsınız. Bazen tam doğru görünerek gelir. Diğer zamanlar tüm tasarımı sıyrılmış çıplak metin olarak iner. Aynı eylem, farklı sonuç ve rastgele hissettirir. Değildir. Fark, satır içi HTML kopyalayıp kopyalamadığınızdır.
Bu tek fikri anlamak, stilli içerik yapıştırmayı bir kumar yerine öngörülebilir kılar.
Satır içi HTML aslında nedir
Web stillendirmesi iki yerde yaşayabilir. Normal bir web sitesinde stillendirme ayrı bir stil sayfasında oturur ve HTML ona yalnızca sınıf adıyla atıfta bulunur: <div class="title-card">. Div tek başına anlamsızdır — tasarım başka bir yerde bir CSS dosyasında yaşar.
Satır içi HTML, stillendirmeyi öğenin içine koyar: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. Bloğu oluşturmak için gereken her şey blokla birlikte gider. Bağımlı olunacak harici bir dosya yoktur.
Bu ayrım, bazı yapıştırmaların tasarımını neden koruduğunun, diğerlerinin neden korumadığının bütün hikâyesidir. Bir düzenleyiciye yapıştırdığınızda, düzenleyici kaynak web sitesinin stil sayfasını almaz. Tasarım o stil sayfasında yaşıyorsa, gitmiştir — çıplak yapıyı, yani düz görünen metni alırsınız. Tasarım satır içiyse, birlikte gelir ve blok doğru oluşturulur.
WeChat ve zengin düzenleyiciler neden buna ihtiyaç duyar
WeChat'in düzenleyicisi katıdır. Harici stil sayfalarını kaldırır ve çok fazla stillendirmeyi filtreler. Başka yerde tanımlı bir sınıfa dayanan bir blok, WeChat'in içine girdiğinde geri döneceği hiçbir şeye sahip değildir. Birçok zengin metin düzenleyicisi ve CMS yapıştırma alanı aynı şekilde davranır — yapıştırdığınız şeyi temizler ve yalnızca satır içi öznitelikleri korur.
Dolayısıyla stilli bir bloğu bu düzenleyicilere taşımanın güvenilir yolu, onu stillendirmenin kendi kendine yeter olduğu satır içi HTML olarak kopyalamaktır. Sonra katı bir düzenleyici bile bloğu tasarlandığı gibi göstermek için ihtiyaç duyduğu her şeye sahiptir.
Bir bloğu "biçimlendirmeyle" kopyalamak nasıl çalışır
Modern tarayıcıların yalnızca düz metni değil, zengin içeriği — biçimlendirmeli HTML'yi — panoya yerleştirebilen bir Pano API'si vardır. Bir araç bir bloğu "satır içi HTML olarak" kopyaladığında, bloğun kendi kendine yeter işaretlemesini panonuza koymak için o API'yi kullanır. Sonra düzenleyiciye yapıştırırsınız (Ctrl/Cmd+V) ve stillendirme satır içi olduğundan ve pano HTML'yi taşıdığından, blok stilli görünür.
Bunun çalışması için iki şeyin doğru olması gerekir:
- İşaretleme satır içi stilli olmalı, böylece harici bir dosya gerekmez.
- Pano onu HTML olarak taşımalı, açılı parantezlerin düz metin dökümü olarak değil.
Her ikisini de doğru yapın, yapıştırma "kendiliğinden çalışır". Birini kaçırın, düz metin ya da bir görünür kod duvarı elde edersiniz.
Kodu elle düzenlemeden yapmak
İlke olarak stilli bir bloğu alıp her stili elle satır içi yapabilirsiniz — her sınıfın kurallarını her öğedeki bir style="" özniteliğine taşıyabilirsiniz. Önemsiz bir bloğun ötesindeki her şey için bu sıkıcı ve hataya açıktır, özellikle stillendirmenin birçok düğüme yayıldığı SVG kartlarıyla.
Bunu halleden bir araç daha kolaydır. IMG.DIY'nin Düzen Modülü Çıkarıcısı yapıştırılmış WeChat içeriğinden stilli blokları çıkarır ve her birine, onu Pano API'si aracılığıyla satır içi HTML olarak panonuza koyan bir kopyalama düğmesi verir. Kopyala'ya tıklarsınız, WeChat düzenleyicisine (ya da CMS'nize ya da bir zengin metin alanına) geçersiniz, yapıştırırsınız ve blok biçimlendirmesini korur. Elle satır içi yapma yok, bozuk işaretlemeyi düzeltme yok.
Hızlı bir yapıştırma kontrol listesi
Stilli bir yapıştırma ters gittiğinde, şunları gözden geçirin:
- Satır içi HTML mi kopyaladınız, yoksa bir ekran görüntüsü/düz metin mi? Yalnızca satır içi HTML çalışan bir stilli blok olarak yapışır.
- Düzenleyicinin normal gövdesine yapıştırın, işaretlemeyi sıyırabilecek ya da kaçış karakteri ekleyebilecek bir "kaynak kodu" ya da "düz metin" moduna değil.
- Bloğu önizlemede kontrol edin. WeChat'in kendi önizlemesi, bloğun bir telefonda gerçekte nasıl oluşturulacağını gösterir — yayımlamadan önce orada doğrulayın.
- Renkler tuhaf görünüyorsa, kopyalamadan önce yeniden renklendirin. Çıkarıcıda bir renge tıklayıp onu blokta her yerde değiştirebilirsiniz, böylece onu zaten marka renklerinizde kopyalarsınız.
Tekrarlamaya değer dürüst bir sınır: böyle bir araç blokları kopyalar ve düzenler — bir çıkarıcıdır, sıfırdan bir şablon tasarımcısı değildir ve bir makaleyi URL ile getiremez (tarayıcılar WeChat sayfalarının siteler arası getirilmesini engeller, dolayısıyla içeriği siz yapıştırırsınız). Bu sınırlar içinde, satır içi HTML, stilli bir bloğun tasarımı bozulmadan bir düzenleyiciden diğerine yolculuğu atlatmasını sağlayan şeydir.
Bir bloğun birkaç kez kusursuz yapıştığını gördükten sonra, önceki rastgelelik anlam kazanır: hiç rastgele değildi. Her zaman stillendirmenin bloğun içinde gidip gitmediğiyle ilgiliydi.