CSS ile stil uygulama

Blockly uygulamaları HTML ve SVG öğelerinden oluşur. Bu öğeler, neyi temsil ettiklerini (ör. blocklyBlock, blocklyField) ve durumlarını (ör. blocklyEditing, blocklySelected) tanımlayan CSS sınıflarıyla etiketlenir. Blockly ayrıca varsayılan bir CSS kuralı grubu da sağlar.

Uygulamanızı biçimlendirmek için CSS'yi kullanabilirsiniz:

• Blockly'nin CSS kurallarını kendi kurallarınızla geçersiz kılın.
• Daha fazla özelleştirme için Blockly bileşenlerine kendi CSS sınıflarınızı ekleyin.
• Özel bileşenleri stilize etmek için CSS sınıflarını ve kurallarını kullanın.

Not: Blockly hâlâ temaları desteklese de Blockly uygulamalarını stilize etmek için CSS kullanılması tercih edilir.

CSS sınıfları

Blockly uygulamaları, stil verilecek öğeleri tanımlamak için CSS sınıflarını kullanır. Bu, tür (öğe) seçicilere kıyasla daha ayrıntılı kontrol sağlar.

Blockly CSS sınıfları

Blockly, kullandığı HTML ve SVG öğeleri hakkında aşağıdaki türlerde bilgiler sağlamak için CSS sınıflarını kullanır.

• Tür. Blockly CSS sınıflarının çoğu, bir öğenin neyi temsil ettiğini tanımlar. Örneğin, bir bloğun kök öğesi blocklyBlock olarak etiketlenir. Bazı öğeler, her biri bir öncekinden daha spesifik olan birden fazla sınıfla etiketlenir. Örneğin, bir metin giriş alanının kök öğesi blocklyField, blocklyInputField ve blocklyTextInputField olarak etiketlenir. Tür sınıfları, bileşenin kullanım süresi boyunca aynı kalır.

• Eyalet. Blockly, bir bileşenin durumunu belirtmek için CSS sınıflarını da kullanır. Örneğin, imleç bir metin giriş alanındayken kök öğesi blocklyEditing sınıfıyla etiketlenir. İmleç uzaklaştırıldığında bu sınıf kaldırılır.

• Ek bilgiler Blockly, ek bilgiler sağlamak için birkaç CSS sınıfı kullanır. Örneğin, <div> ekleme işlemi, çalışma alanının mevcut oluşturucusunun ve temasının adını sağlayan sınıflara sahiptir. Bu sınıflar genellikle uygulamanın ömrü boyunca aynı kalır.

Blockly'nin hangi CSS sınıflarını kullandığını öğrenmenin en kolay yolu, tarayıcınızın geliştirici araçlarını açıp uygulamanız tarafından kullanılan öğeleri incelemektir.

Özel CSS sınıfları

Blockly bileşenlerine daha fazla özgünlük sağlamak için özel CSS sınıflarını kullanabilirsiniz.

Çalışma alanları

Bir çalışma alanının yerleştirme <div> alanına CSS sınıfı eklemek veya bu alandan CSS sınıfı kaldırmak için WorkspaceSvg.addClass veya WorkspaceSvg.removeClass işlevini çağırın.

Araç kutuları

Araç kutusundaki bir düğmeye veya etikete CSS sınıfı eklemek için araç kutusunun JSON tanımında web-class anahtarını kullanın. Daha fazla bilgi için Düğmeler ve etiketler başlıklı makaleyi inceleyin.

Bir kategorinin çeşitli bölümleri için kullanılan CSS sınıflarını geçersiz kılmak üzere kategorinin JSON tanımında cssConfig anahtarını kullanın. Bu sayede tek tek kategorileri stilize edebilirsiniz. Daha fazla bilgi için Kategori CSS başlıklı makaleyi inceleyin.

Bloklar

Özel bir bloğa CSS sınıfları eklemek için classes anahtarına bir dize veya dize dizisi iletin.

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String",
    }
  ],
  "classes": "myStringLengthBlock",
  "output": "Number",
  "colour": 160,
}]);

Ayrıca, <g> veya BlockSvg.removeClass işlevlerini çağırarak bir bloğun <g> öğesine CSS sınıfı ekleyebilir ya da bu öğeden CSS sınıfı kaldırabilirsiniz.BlockSvg.addClass

Etiket alanları

Bir etiket alanı veya serileştirilebilir etiket alanı tarafından kullanılan <text> öğesine CSS sınıfı eklemek ya da bu öğeden CSS sınıfı kaldırmak için FieldLabel.setClass işlevini çağırın. Ayrıca, etiketin oluşturucusuna bir sınıf adı da iletebilirsiniz.

CSS sınıfları ve özel bileşenler

Özel bir bileşen oluştururken özel CSS sınıfları eklemek için aşağıdaki yöntemlerden birini kullanın:

• Bileşeniniz Field veya Icon sınıfının alt sınıfıysa initView yöntemini geçersiz kılın. Örneğin:

  class MyCustomField extends Blockly.FieldTextInput {
    ...
  
    initView() {
      super.initView();
  
      // Add custom CSS class so we can style the field.
      if (this.fieldGroup_) {
        Blockly.utils.dom.addClass(this.fieldGroup_, 'myCustomField');
      }
    }
  }
  

  Daha fazla bilgi için Alanları CSS ile özelleştirme veya Simgenin görünümünü oluşturma başlıklı makaleleri inceleyin.

• SVG öğesi oluştururken sınıfınızı Blockly.utils.dom.createSvgElement'ya iletin:

  this.svgRoot = Blockly.utils.dom.createSvgElement(Svg.G, {'class': 'myCustomComponent'});
  

• Bir HTML öğesi oluştururken Blockly.utils.dom.addClass kullanın:

  const myDiv = document.createElement('div');
  Blockly.utils.dom.addClass(myDiv, 'myInformation');
  

İnşaattan sonra sınıf eklemek veya kaldırmak için Blockly.utils.dom.addClass ya da Blockly.utils.dom.removeClass simgesini kullanın.

setMyHighlight(highlight) {
  if (highlight) {
    Blockly.utils.dom.addClass(this.svgRoot, 'myHighlight');
  } else {
    Blockly.utils.dom.removeClass(this.svgRoot, 'myHighlight');
  }
}

Uyarı: Blockly dahil olmak üzere başkaları tarafından yazılan bileşenlere sınıf eklemek veya bu bileşenlerden sınıf kaldırmak için dom.addClass veya dom.removeClass kullanmayın. Bu durum, tahmin edilemeyen sonuçlara yol açabilir.

CSS kuralları arka planı

SVG stil özellikleri ve CSS basamaklandırması hakkında bilgi sahibiyseniz bu bölümü atlayabilirsiniz.

SVG stil özellikleri ve CSS özellikleri

SVG öğeleri SVG stil özellikleri ile stillendirilir. Bunlar, SVG öğelerinde özellik (diğer adıyla sunum özellikleri) olarak veya CSS kurallarında kullanılabilir. Bu nedenle, aşağıdakilerin tümü aynı şeyi yapar.

<!-- SVG file with presentation attributes. -->
<circle fill="red" ... />

<!-- SVG file with <style> tag. -->
<style>
  circle {fill:red;}
</style>
<circle ... />

/* External CSS file.*/
circle {fill:red;}

<!-- SVG file with inline style. -->
<circle style="fill:red;" ... />

SVG stil özellikleri listesi, CSS özellikleri listesiyle ilişkili olsa da farklıdır:

• Aynı konsept, aynı ad. Örneğin, hem SVG hem de CSS, metnin soldan sağa mı yoksa sağdan sola mı olduğunu belirtmek için direction kullanır.
• Aynı kavram, farklı ad. Örneğin, SVG, dolgu rengini belirtmek için fill kullanır; CSS ise background-color kullanır.
• Yalnızca CSS. CSS'de SVG'de bulunmayan birçok özellik vardır. Örneğin, margin ve padding.
• Yalnızca SVG. SVG'nin CSS'de bulunmayan birkaç özelliği vardır. Örneğin, x ve y.

Bu nedenle, bir SVG öğesine stil uyguluyorsanız SVG stil özellikleri kullanın. Bir HTML öğesini stillendiriyorsanız CSS özelliklerini kullanın.

CSS basamağı

CSS basamaklandırması, CSS kurallarının önceliklerini belirler. Bu öncelikler, belirli bir özellik ve öğe için birden fazla kural geçerliyse hangi kuralın kullanılacağını belirler. Aşağıdaki basitleştirilmiş basamaklandırma, Blockly tarafından en sık kullanılan basamaklandırma bölümlerini kapsar ve "Neden CSS'm çalışmıyor?" sorusunu yanıtlamanıza yardımcı olabilir.

Basitleştirilmiş sıralama

Belirli bir öğe ve özellik için hangi kuralın geçerli olduğunu belirlemek üzere aşağıdaki adımları uygulayın ve yalnızca bir kural kaldığında durun:

1. Mülk ve öğe için geçerli olan tüm kuralları toplayın.
2. !important ek açıklaması olan kurallar varsa !important ek açıklaması olmayan tüm kuralları atın.

3. En yüksek özelliğe sahip kuralları seçin.

   • SVG sunum özelliklerinin özgüllüğü sıfırdır.
   • Bir <style> etiketindeki veya harici stil sayfasındaki kuralların özgüllüğü normal şekilde hesaplanır.
   • Satır içi stiller (style özniteliğiyle ayarlanan stiller), herhangi bir seçiciden daha yüksek bir özgüllüğe sahiptir.

4. Belgede en son görünen kuralı seçin.

5. Hiçbir kural uygulanmıyorsa özelliğin değerini öğenin üst öğesinden devralın.

Bu algoritma, basamaklandırmanın aşağıdaki kısımlarını dikkate almaz:

• En yüksek önceliğe sahip olan transition özelliği. Blockly bunlardan birkaçını kullanır.
• @media @ kuralı. Blockly bunlardan birini kullanır.
• Tarayıcı veya kullanıcı tarafından belirtilen kurallar.
• Blockly tarafından kullanılmayan @scope ve @layer @ kuralları ile animation özelliği.

CSS kuralları

CSS kuralları, uygulamanızın nasıl stilize edileceğini belirtir. Blockly, kendi kurallarınızla geçersiz kılabileceğiniz varsayılan bir kural kümesi sağlar.

Blockly CSS kuralları

Blockly, varsayılan bir CSS kuralı grubu sağlar. Bu kuralların nasıl ve nereye eklendiği, önceliklerini etkiler.

Stil etiketleri

Blockly'nin CSS kurallarının çoğu iki <style> etiketinde belirtilir. Bu etiketler sayfanın üst kısmına yakın bir yerde bulunduğundan, içlerindeki kurallar aynı özellikteki ve sayfada daha sonra yer alan kurallara göre daha düşük önceliğe sahiptir.

Blockly.css.register kuralları

Blockly yerleştirildiğinde <style> etiketini <head> etiketinin alt öğesi olarak ekler. Bu etiketteki kurallar şunlardan gelir:

• Blockly.css ad alanı. Bu kuralları görmek için core/css.ts dosyasını açın ve let content ifadesini arayın.
• Bileşene özel CSS kuralları eklemek için Blockly.css.register işlevini çağıran ayrı bileşenler. css.register bu kuralları content dizesinin sonuna eklediğinden, bu kurallar daha önce eklenen ve aynı özellikteki kurallara göre daha yüksek önceliğe sahiptir. Bu kuralları görmek için Blockly.css.register bölümüne bakın.

Bu kuralları kullanmak istemiyorsanız css yapılandırma seçeneğini false olarak ayarlayın. Bu durumda, alternatif bir CSS kuralı grubu sağlamak sizin sorumluluğunuzdadır.

Oluşturucu kuralları

Oluşturucu örneklendiğinde, <style> etiketi, <head> etiketinin alt öğesi olarak oluşturucuya özgü CSS kurallarını içeren bir <style> etiketi ekler. Bu kuralların her zaman eklendiğini ve css yapılandırma seçeneğinden etkilenmediğini unutmayın. Bu kuralları görmek için oluşturucunuzda getCss_ yöntemini arayın.

Satır içi stiller

Satır içi stiller style özelliğiyle belirtilir ve genellikle bir bileşenin DOM'u oluşturulduğunda oluşturulur. Kısmi liste için bu GitHub sorgusuna bakın.

Satır içi stiller, bulundukları öğeye doğrudan uygulanır ve herhangi bir seçiciden daha yüksek bir özgüllüğe sahiptir. Bu nedenle, bunları geçersiz kılmak için genellikle !important açıklaması kullanmanız gerekir.

SVG sunum özellikleri

SVG sunum özellikleri, SVG öğelerinin özellikleri olarak kullanılan SVG stil özellikleridir. Özgüllükleri sıfırdır ve !important ek açıklaması içeremezler. Bu nedenle, Blockly'nin tüm kuralları arasında en düşük önceliğe sahiptirler. Blockly genellikle bunları createSvgElement çağrıları içinde oluşturur.

Kendi CSS kurallarınızı ekleme

Blockly ile aynı yöntemleri kullanarak kendi CSS kurallarınızı ekleyebilirsiniz:

• Blockly'yi eklemeden önce Blockly.css.register işlevini çağırın. Kurallarınız Blockly'nin kurallarından sonra eklenir ve aynı özellikteki Blockly kurallarından daha yüksek önceliğe sahiptir.
• <style> etiketinin sonraki alt öğesi olarak <style> etiketi ekleyin veya harici bir stil sayfasına bağlantı verin.<head> Blockly, kurallarını <head> etiketinin ilk iki alt öğesi olarak eklediğinden kurallarınız, aynı özellikteki Blockly kurallarından daha yüksek önceliğe sahip olur.
• Özel bir bileşendeki öğelere stil eklemek için satır içi stilleri kullanın. Bu kurallar, seçici içeren kurallardan daha spesifik olacaktır.
• Özel bir bileşendeki SVG öğelerinde sunum özelliklerini kullanın. Bu kurallar, seçici içeren kurallara göre daha az özgül olacaktır.

Sorun giderme

CSS'niz çalışmıyorsa bunun olası nedenleri şunlardır:

• Bir SVG öğesinde CSS özellikleri veya bir HTML öğesinde SVG stil özellikleri kullanıyorsunuz. SVG stil özellikleri ile CSS özellikleri arasındaki farklar başlıklı makaleyi inceleyin.

• Kuralınızın önceliği başka bir kuraldan daha düşüktür. Bu durumun nedeni genellikle daha düşük bir özelliktir. Bu sorunu düzeltmek için aşağıdaki yöntemleri deneyebilirsiniz:

  • Tür (öğe) seçici yerine sınıf seçici kullanın.
  • Birden fazla seçici kullanın.
  • Mümkünse hedef öğenize özel bir sınıf ekleyin ve bu sınıfı kuralınızda kullanın.
  • Son çare olarak, kuralınıza !important ek açıklama ekleyin. Bu, satır içi stil (style özelliği) kullanılarak rakip bir kural belirtilmişse tek seçeneğinizdir.

• Kuralınız, başka bir kuralla aynı özgüllüğe sahip ancak sayfada daha önce gerçekleşiyor. Kuralınızın özgüllüğünü artıramıyorsanız kuralı sayfada daha aşağıya taşıyın.

Geçersiz kılamayacağınız iki tür CSS kuralı vardır:

• transition kuralı içinde ayarlanan özellikler.
• !important kuralları belirtilir.