Web’de Küçük Sıkıntılar Nasıl Şık [Firefox & Chrome] ile düzeltilir

Web tasarımcılarının neredeyse imkansız bir işi var. Herkesi memnun edecek tek bir tasarım geliştirmeleri gerekiyor. Tüm dünyada milyonlarca insan tarafından kullanılan Gmail gibi bir hizmetten bahsederken, “neredeyse” Bölüm - sadece imkansız. Yeniden tasarım çoğu insan tarafından beğenilse bile, her zaman yeni görünümü beğenmeyen kullanıcılar olacaktır..

Bazen, Google’ın Gmail simgesi düğmeleriyle yaptığı gibi, bir şirketi geri izlemeye zorlayacak bu kullanıcıların sayısı yeterli. Ama ya senin bir şeyin varsa Gerçekten mi nefret ve şirket geri değişmez mi? Sonsuza dek onunla mı kaldın? Kullanıcı stilleri sayesinde bu sorunları kendiniz çözebilirsiniz.

Şık tanıtımı

Şık, hem Firefox hem de Chrome için kullanılabilen ücretsiz bir eklentidir ve oldukça büyülü bir şey yapmanıza izin verir - kendi stillerinizi web sayfası öğelerine uygulayın. Bir web geliştiricisi olmasanız ve hayatınıza biraz CSS yazmamış olsanız bile, bu göründüğünden çok daha kolaydır. Web sitelerini tamamen dönüştürmek için Şık'ı kullanabilirsiniz (bir sonraki bölümde size göstereceğim gibi), ancak daha da önemlisi, küçük rahatsızlıkları birkaç dakika içinde düzeltmek için Şık'ı kullanabilirsiniz..

Örneğin, Gmail’de varsayılan yazı tipi boyutunda bir sorunla karşılaştım. Arayüz iyi - Tarayıcımla (Ctrl +) yakınlaştırmak istemedim, çünkü tüm arayüz öğelerinin boyutunu artıracak ve gerçekten çirkin olacaktı. Sadece mesaj fontunu biraz büyütmek için bir yol istedim..

Stylish ile gerçekten basitti ve size nasıl olduğunu göstereyim. Ancak, kendi kullanıcı stillerinizi yaratmaya bakmadan önce, diğer insanların çalışmalarından yararlanmaktan bahsedelim..

UserStyles.org

Eğer sinirlerine bir şey geliyorsa, yalnız olmaman tamamen mümkün. UserStyles.org, kullanıcıların oluşturdukları stilleri paylaşmalarını sağlayan bir web sitesidir. Yukarıda, Gmail simgesi düğmeleri hakkındaki hikayemize yanıt olarak MakeUseOf yorum yazarı RandyN tarafından önerilen bir stil (araç çubuğu simgelerine etiketler ekleyin) görebilirsiniz. Bu stil, simgeleri korumanıza izin verir, ancak metin etiketleri ekler - Google'ın yapmana izin vermeyeceği bir şey.

UserStyles.org harika, ama mükemmel değil. Tasarımların bazıları çok fazla şey yapmaya çalışıyor (bir web sitesinin görünümünü tamamen değiştiriyor) ve bazıları web sitelerinin eski sürümleri içindir ve şimdi kullanımda kalmıştır. Küçük bir şeyi düzeltmeye çalışıyorsanız ve UserStyles.org'da bulamıyorsanız, belki de en iyi eylem yolunuz kendi başınıza yapmaktır..

Kendi Basit Kullanıcı Stilinizi Yaratın

Kendi kullanıcı stilinizi oluşturmak için önce sayfanın hangi öğesini değiştirmeye çalıştığınızı ve sonra hangi değişikliği yapmak istediğinizi bilmeniz gerekir. Yani, başlamak için, değiştirmek istediğinizi sağ tıklayın ve seçin Öğeyi İncele. Böyle bir şey görmelisin:

Firefox sayfanın geri kalanını koyulaştırır ve seçtiğiniz öğenin çevresine çok net bir çerçeve çizer. Bu öğenin üstünde, yazan metin div # 2d6.ii.gt.adP.adO, bir kimlik (C # ile başlayan kısım) ile birlikte bir grup CSS sınıfıdır. Bu, bu öğenin stilini etkileyen seçicidir. Ekranın alt kısmında sizi sağlayan bir gezinti çubuğu var. “DOM ağacını geç“, veya daha basit bir deyişle, seçtiğiniz öğeye giden öğelerin hiyerarşisinde yukarı veya aşağı gidin.

Buradaki oyunun adı, stillendirmek istediğiniz öğeyi seçmek ve seçimi etkilemek istediğiniz her şeyi etkilemeyecek kadar dar değil, başka şeyleri de karıştıracak kadar geniş yapmaktır..

Bir elementi daha yükseğe tıklattım, div.gs, Sadece adını sevdiğim için (çok yakında değişmeyecek bir şeye benziyor, ama bu benim açımdan tam bir tahmin). Tüm mesaj alanını etkiler. Stillemek istediğiniz alan seçildikten sonra, stil açmak için sağ alt köşedeki düğmesine basın. kurallar bölmesi:

Biliyorum, ilk başta korkutucu. Ancak bu, seçtiğiniz öğeyi etkileyen farklı CSS kurallarını gördüğünüz yerdir ve bu, kendi geçici değişikliklerinizi yapabileceğiniz ve sayfa üzerindeki etkilerini yeniden yüklemeden gerçek zamanlı olarak görebileceğiniz yerdir. Ama neyi değiştirmelisin? Tıkla Özellikleri düğme ve işareti kaldır “Sadece kullanıcı stilleri”:

Burada tam bir listesini görebilirsiniz herşey CSS kuralları İhtiyacınız olan şeyleri anlamlı kılan bir kural bulana kadar listeyi aşağıya kaydırabilirsiniz (bizim durumumuzda yazı tipi boyutu) ve hatta bir açıklama sayfası açmak için yanındaki soru işaretini tıklayabilirsiniz. Şimdi, biliyoruz ki, sınıfı olan tüm div elemanları için font-size özelliğini değiştirmek istiyoruz. “gs” (yazılı olarak div.gs).

Kalan tek soru, değerinin ne olmasını istediğimizdir. Bunun için Kurallar bölmesine geri dönüp oynamaya başlarız:

40 piksel biraz çılgınca olabilir, ancak genel bir fikir edindiniz. Bununla oynayın ve aradığınız görünümü elde edene kadar başka özellikler eklemekten çekinmeyin. Sayfayı kapatmadığınızdan emin olun, çünkü değişiklikleriniz değil her yere kaydedildi.

Yeni Stilinizi Kaydetmek

Sitenin bu bölümünü istediğiniz gibi görünmesini sağladıktan sonra, kaydetme zamanı gelmiştir. Tıkla Şık Eklenti çubuğunda simgesine basıp “Yeni stil yaz”. Şık daha sonra yeni stili hangi sayfalarda uygulayacağını bilmek ister - bizim durumumuzda ikinci seçeneği seçin, “mail.google.com”. Ardından, bu iletişim kutusunu göreceksiniz:

Ben çoktan doldurdum. Açıkçası, stil için bir isim ve bazı etiketler seçtim. Ancak asıl şeyler kodun içinde olur: 3. satır zaten oradaydı - Şık, uygulamanın hangi sayfalarda uygulandığını bilmesi için yerine oturtuyordu. Fakat 5-7 hattı benim. Onları analiz edelim:

Satır 5: div.gs - Bu kısmı tanımanız gerekir. Stil vermeye karar verdiğimiz unsur budur. Açılış ayracı şimdi bazı CSS kuralları yazacağımız anlamına geliyor.

Satır 6: font-size: 20px! önemli; - değiştirmek istediğimiz kural budur (font-size), ardından yeni tanımı (20 piksel) ve ardından “!önemli” Deklarasyon, yani bir element bile Firefox’un bu kurala uyması anlamına geliyor “yakın” Metin yazı tipi boyutunu farklı bir şeye ayarlamaya çalışır..

Satır 7: - stil tanımını kapatma.

Ardından, Önizleme'ye tıklayın ve işinize hayran kalın:

Sonunda, çalıştığını görünce Kayıt etmek.

Bu Komple Bir Kılavuz Değil

Bu kısa öğreticiyi tek bir yazının sınırları içinde tutmak için bir dizi sıçrama ve atlama yapmak zorunda olduğumun farkındayım. Yol boyunca kafanız karıştıysa, lütfen özrümü kabul edin. CSS ilk başta zor, ancak bunu bir kez hallettiğinde o kadar karmaşık değil - ve web sitelerini yerel olarak özelleştirmek, öğrenmenin en iyi yollarından biri olmaya devam ediyor.

Herhangi bir şeyle karıştıysanız, lütfen bana aşağıdan sorun, yardım için elimden geleni yapacağım..