CSS'deki '@' sembolünün amacı nedir?

Ben sadece bu soru tökezledi ve kullanıcı daha önce hiç görmedim bazı gösterim kullandığını fark ettim:

@font-face {
   /* CSS HERE */
}

Peki bu @sembol CSS3'te yeni bir şey mi, yoksa bir şekilde göz ardı ettiğim eski bir şey mi? Bu #, kullandığınız bir kimliğe ve kullandığınız bir sınıfa sahip gibi bir şey .mi? Google bana bununla ilgili iyi makaleler vermedi. @CSS'deki sembolün amacı nedir ?

@@importson zamanlarda @media(CSS2, CSS3) ve @font-face(CSS3) yapılarında giderek daha yaygın hale gelmesine rağmen, CSS1'deki günlerden beri var olmuştur . @Ben de belirtildiği gibi sözdizimi kendisi olsa da, yeni değil.

Bunların hepsi CSS'de kurallar olarak bilinir . Kurallar ve özellikler kullanılarak Web belgelerindeki (X) HTML / XML öğelerinin stiliyle doğrudan ilgili olmayan tarayıcı için özel talimatlardır, ancak stillerin nasıl uygulandığını kontrol etmede önemli roller oynarlar.

Bazı kod örnekleri:

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

• @font-facekuralları , tasarımlarınızda kullanılmak üzere tüm bilgisayarlarda her zaman bulunmayan özel yazı tiplerini tanımlar, bu nedenle tarayıcı sunucudan bir yazı tipi indirir ve o özel yazı tipindeki metni, kullanıcının bilgisayarında yazı tipine sahipmiş gibi ayarlar.

• @mediakuralları , medya sorgularıyla birlikte (eski adıyla yalnızca medya türleri ), hangi stillerin uygulandığını ve sayfanın hangi medyada görüntülendiğine bağlı olmadığını kontrol eder. Kod örneğimde, yalnızca bir belge yazdırılırken tüm metin ayarlanmalıdır beyaz (kağıt) bir arka plan siyah. Yazdırma ortamlarını, mobil aygıtları vb. Filtrelemek için medya sorgularını kullanabilir ve bunlar için sayfaları farklı şekillerde biçimlendirebilirsiniz.

At-kuralların seçicilerle hiçbir ilişkisi yoktur. Farklı doğaları nedeniyle, farklı kurallar çok sayıda farklı modülde farklı şekillerde tanımlanmaktadır. Daha fazla örnek şunları içerir:

• Koşullu kurallar
• Ana kare animasyonları
• Sayfalı medya

(bu liste ayrıntılı olmaktan uzaktır)

MDN'de ayrıntılı olmayan başka bir liste bulabilirsiniz .

@ bir kuralı tanımlamak için kullanılır.

@import
@page
@media
@ font-face
@charset
@namespace

Yukarıdakilere at-rules denir .

Daha fazla açıklamak için yararlı olabilecek bir @media örneği:

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

Bu, daha küçük bir ekranda daha küçük bir görüntü kullanarak görüntünün boyutunu koşullu olarak ekranın boyutuna göre değiştirir. İlk blok 1440 piksel genişliğe kadar olan ekranları ele alacaktır; ikincisi 1440 pikselden daha büyük ekranlara yöneliktir.

Bu, daha küçük ekranlarda yüzen veya kaydırılan sekmeler gibi şeylerle kullanışlıdır; genellikle sekme etiketlerinin yazı tipi boyutunu daha küçük ekranlarda bir punto boyutuna düşürebilir ve hepsinin sığmasını sağlayabilirsiniz.

@ kural belirtimi olarak kullanılır. Sevmek@font-face

ProBoards CSS stili bunları değişken olarak da kullanır.

İşte CSS sayfalarından birinden küçük bir snipptt:

@wrapper_width: 980px;
@link_color: #c06806;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

NOT: yerel değil, ilk yoruma bakın.