CSS ön ekleri, CSS komutlarının bütün tarayıcılarda düzgün çalışmasını sağlayan küçük CSS kodlarıdır. Kullanıcılar internet sitelerine erişmek için farklı tarayıcılar kullanmaktadır. Bazı kullanıcılar ise aynı tarayıcının farklı sürümlerini kullanır. Bazı yeni CSS komutları, eski sürüm tarayıcılarda çalışmaz. Çünkü eski sürüm tarayıclarda, yeni CSS komutlarının nasıl yorumlanması gerektiği bilgisi yer almaz. İşte CSS ön ekleri bu sorunu ortadan kaldırmak için tasarlanmıştır. CSS ile yaptığımız tasarımın, mümkün olan her tarayıcıda düzgün çalışması için CSS ön eklerini yazmamız gerekir.

Temelde kullanılan 4 CSS ön eki vardır. Bu ön ekler en popüler tarayıcılar için düzenlenmiştir. -webkit- ön eki, eski sürüm Chrome ve Safari tarayıcıları için, -moz- ön eki, eski sürüm Firefox tarayıcısı için, -o- ön eki, eski sürüm Opera için kullanılır. Fakat ön ekleri, her tarayıcı için ayrı ayrı yazmamız gerekir. Örneğin,

#yazi1{
   display:flex;
}

Flex CSS komutu, bütün güncel tarayıcılar tarafından tam desteklense de eski sürüm bazı tarayıcılarda çalışmamaktadır. Bu komutun eski sürüm tarayıcılarda da çalışması için her tarayıcı sistemi için flex komutunu ön ekli şekilde yeniden yazmamız gerekmektedir.

#yazi1{display:flex;} /*Güncel tarayıcılar için*/
-webkit-#yazi1{display:flex;} /*Eski sürüm Chrome ve Safari için*/
-moz-#yazi1{display:flex;} /*Eski sürüm Firefox için*/
-ms-#yazi1{display:flex;} /*Eski sürüm Internet Explorer için*/
-o-#yazi1{display:flex;} /*Eski sürüm Opera için*/

Gördüğünüz gibi basit bir ön ek kodlaması için bile komutları tekrar tekrar yazmamız gerekmekte. Bunun yanında bazı CSS komutları, eski sürüm bazı tarayıcılar tarafından desteklenirken, bazılarında çalışmamaktadır. Yani hangi komutlar için hangi ön ekleri yazmamız lazım, bunu da bilmemiz gerekir. Bunun yanında bazı CSS komutlarının kullanımı zamanla değişmiştir (Örneğimizdeki Flex komutu gibi). Eski sürüm tarayıcılarda bu tür komutların çalışması için komutları eski yazım şekilleriyle yazmamız gerekmekte. Caniuse internet sitesinden hangi tarayıcıda hangi CSS komutları desteklenmez, hangi ön ekler yazılmalıdır, sorularının cevaplarını bulabilirsiniz.

Kısacası, her ne kadar ön ekler tasarımımızın bir çok platformda düzgün çalışması için gerekliyse de, kodlaması oldukça zahmetlidir. İşte bu yüzden bazı geliştiriciler, ön eklerin kolayca yazılmasını sağlayan bazı yöntemler geliştirmiştir. Bu yöntemlerle, ön ekler otomatik olarak CSS yapımıza eklenir. Şimdi kolay yazım yöntemlerinden en popüler 2 tanesine göz atalım.

Autoprefixer, yazılmış CSS komutlarına gereken ön ekleri ekleyen bir websitesidir. Aslında buna benzer pek çok website varsa da Autoprefixer en popüler olanıdır. Eğer bu sistemi kullanacaksak, ön ekleri hiç düşünmeden CSS kodlamamızı yapar, kodlamayı bitirdikten sonra Autoprefixer sayfasındaki alana (sol tarafa) kodlarımızı yapıştırır, diğer taraftan (sağ) CSS kodlamamızı ön ekler eklenmiş olarak alabiliriz. Ayrıca gerekli ise eski CSS kodları da Autoprefixer tarafından çıktı tarafına eklenir.

Prefix Free, javascript ile oluşturulmuş 2 kilobyte'lık bir dosyadır. Bu dosyayı HTML sayfamıza eklersek, artık CSS ön ekleri için kaygılanmamıza gerek kalmaz. Prefixfree, CSS komutlarının çalışmasından hemen önce tarayıcı bilgilerini alır ve gerek varsa CSS komutlarını ön ekli hale getirir.