From 50e1d954d541c771867cf10b9b8d85982efe45fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fatih=20Hayrio=C4=9Flu?= Date: Mon, 25 Dec 2023 09:43:33 +0300 Subject: [PATCH] Yeni yazim property --- ...-ile-tip-tan\304\261m\304\261-property.md" | 84 ++++++++++++++++++ images/property.png | Bin 0 -> 450209 bytes 2 files changed, 84 insertions(+) create mode 100644 "_posts/2023-12-25-css-ile-tip-tan\304\261m\304\261-property.md" create mode 100644 images/property.png diff --git "a/_posts/2023-12-25-css-ile-tip-tan\304\261m\304\261-property.md" "b/_posts/2023-12-25-css-ile-tip-tan\304\261m\304\261-property.md" new file mode 100644 index 00000000..62d074b3 --- /dev/null +++ "b/_posts/2023-12-25-css-ile-tip-tan\304\261m\304\261-property.md" @@ -0,0 +1,84 @@ +--- +layout: post +title: CSS ile tip tanımı @property +description: CSS ile değişkenlere tip tanımı @property +lang: tr_TR +Date: 2023-12-25 10:00 +Category: CSS +tags: [property, initial-value, inherits] +image: + feature: property.png +--- + +@property nedir? CSS'in yeni bir özelliği mi? Aslında yeni bir CSS tanımı ve özelliği değil. @property geliştiriciler olarak bizim hiç dahil omadığımız alanlara girmemize izin verilen bir tanım daha doğrusu [CSS Houdini](https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini)'nin bir parçasıdır. + + > CSS Houdini, Tarayıcı API'leri koleksiyonu için bir çatı terim olan Houdini, web geliştirme sürecine ve genel olarak CSS standartlarının geliştirilmesine önemli iyileştirmeler getirmeyi amaçlamaktadır. Front-end geliştiricileri, JavaScript kullanarak CSS'i yeni özelliklerle genişletebilecek, CSS oluşturma motoruna bağlanabilecek ve tarayıcıya bir oluşturma işlemi sırasında CSS'i nasıl uygulayacağını söyleyebilecek. Houdini'nin tarayıcı desteği gelişiyor ve bazı API'ler bugün kullanıma hazır. + +Kısaca, tarayıcı geliştiricilerin biz web geliştiricilere gelin birazda siz geliştirin diye açtığı kapıdır CSS Houdini. @property'de CSS Houdini'nin bir parçasıdır. Parçanın parçası, evet çok fazla parça oldu :) + +@property, biz geliştiricilere [CSS değişkenleri (Custom Properties)](https://fatihhayrioglu.com/css-degiskenleri-custom-properties/ "CSS Değişkenleri (Custom Properties)")'nin tipini, başlangıç değerini ve kalıtsallığını tarayıcıya bildirmemize olanak sağlar. + +Genel yapısı: + +```css +@property --anaRenk { + syntax: ''; + initial-value: blue; + inherits: false; +} +``` +Söz dizimi(syntax) `, , , , , , , , ,