Webkit için CSS3 tarifleri. Mobil cihazlar için yapılmıştır. Her Webkit Limanı için ortak olan nedir

Android ve iPhone - Tarayıcı Savaşları

Bölüm 1. Webkit yardım için acele ediyor

Ağın izlenmesinden sorumlu bir tarayıcı için bir uygulamanın geliştirilmesi

İçerik serisi:

Toplam, iPhone ve Android platformları, çeşitli kaynaklardan indirmek için 100.000'den fazla uygulamaya sahiptir. Aynı zamanda, "Yerel" uygulamaları, yani. İlgili SDK vasıtasıyla geliştirilen ve toplanan uygulamalar ve ardından bir mobil cihaza yüklenir. Benzer "yerli" uygulamalar, destek dahil olmak üzere mobil cihazın teknik özelliklerini etkili bir şekilde uygulamayı mümkün kılar. kablosuz Ağlar, Bluetooth ve Veri depoları, ivmeölçer veya pusula özellikleri ve diğer teknolojik harikalar ve mobil cihazları kullanıcılar için çok çekici yapan diğer teknolojik harikalar ve yeni öğeler. İPhone ve Android platformları için "Yerli" uygulamalarının popülaritesi son derece büyüktür, ancak ek olarak, mobil cihazlar web uygulamaları geliştirmek için geniş fırsatlar sunar. Mobil teknolojiler, çocukların yaşından uzun bir süredir ortaya çıktı ve onlarla belirli vade ve mobil internete ulaştı.

Bu makale, iphone ve Android platformlarında tarayıcı uygulamaları geliştirmeye adanmış iki bölümden oluşan bir dizidir. Bu dizinin amacı, okuyucuyu kendi mobil web uygulamalarını oluşturmanın temel prensipleri ile tanıtmaktır. Mobil uygulamalar, mobil cihazdaki Web sitesinin başlangıcıyla sınırlı değildir. Yazılımın geliştirilmesinin ayrı bağımsız disiplinde geliştirmenize izin veren mobil uygulamaların geliştirilmesinde kullanılan temel teknolojilere ve yaklaşımlara bakacağız.

Web platformunun popülaritesi, kullanımının geleneksel olarak geliştiricilerin ve sistem yöneticilerinin belgesi olan birçok sorunu çözmenize izin verdiği açıklanmaktadır. Aralarında:

• Kurulum Sorunları: Web uygulamalarını yüklemek herhangi bir soruna neden olmaz - sadece bunları sunucuya kurun veya kopyalayın ve size URL'nizin tarayıcıda belirtilmesi gerektiğini bildirin.
• Yakınlaştırma Sorunları: Web uygulamaları, yüksek performanslı bir veri merkezi sunucusunun sunucusunun havuzuna kolayca ölçeklenir ve uygulama servis araçları uygulamaları korumak için kullanılır.
• Arşivleme ve veri kurtarma sorunları: Web uygulamaları merkezi bir veri ambarı kullanır, böylece başarısızlık durumunda iyileşme görevini basitleştirir.
• Kullanıcı arayüzü Sorular: HTML, basamaklı stil sayfalarının (CSS), JavaScript ve grafik görüntülerinin kombinasyonu, "Yerli" SDK ile geliştirilen yeteneklerini ve görünüm arayüzlerini büyük ölçüde aşan çok işlevli bir kullanıcı arayüzü oluşturmanıza olanak sağlar. İkincisi, bir kural olarak, oyun uygulamaları için varlığın tam bir etkisini sağlayamıyor ve etkileşimli bilgi terminalleri için gerekli işlevselliği garanti etmiyor.
• Kullanımı kolay: Çoğu uygulama, günlük işlemleri kolayca gerçekleştirebilen basit ve kullanıcı arayüz elemanları gerektirir.

İnternet üzerinden başvuruların dağıtım modelinin en çekici yönü, yazılımı karşılıklı olarak faydalı bir teslimat yöntemi olan bir tür abonelik hizmetine dönüştürmenize izin vermesidir. yazılım. "Nasıl?" - sen sor. Bu soruyu daha çok düşünelim.

Bir web arayüzünü kullanmak için dağıtım modeli, alıcıların en az riskle ve en düşük fiyata satın almadan önce ürünü denemelerine izin verir. Eğer duruşma, müşteriyi sevdim, o zaman yazılım ürününün daha fazla kullanımı için gereken her şey, bir kredi kartının satın alınmasını (veya PayPal sistemini kullanarak) ödemektir. Ayrıca, bir hizmet olarak yazılım modeli (SaaS), kullanıcılara önemli ilerleme maliyeti olmadan, kullanmanın ilk ayında yatırımları garanti etmeyen ve uzak gelecekte olmayan yatırımları garanti etmenin uygun ve karlı bir yolunu sunar.

Gerçek şu ki, web tarayıcıları için destek mobil cihazlarah pratik olarak yoktu. Durum, iPhone için tam olarak mobil cihazlar alanındaki yerini güvenle götüren Webkit adlı teknolojinin ortaya çıkışıyla çarpıcı biçimde değişti.

Sadece birkaç yılda, iPhone platformu dünyanın bir numaralı web istemcisi haline geldi. Neden? Webkit, İnternet bağlantısının güvenilir bir şekilde çalışmasıyla birleştirildiği için, mobil cihazlardaki web servislerini diğer modern tarayıcılardan çok daha verimli kullanmayı mümkün kılmıştır. Diğer mobil pazar oyuncuları ayrıca yeni teknolojiye dikkat çekti ve şimdi tüm pazar webkit kullanacak şirketleri, WebKit'i kullanacak şirketleri ve webkit kullanmamak için mazeretleri icat edecek şirketlere ayrılabilir.

Peki WebKit nedir?

WebKit ve HTML5.

WebKit, her ikisi de iPhone platformundaki mobil safari tarayıcısını desteklemek ve Android platformundaki tarayıcıyı desteklemek için kullanılan bir tarayıcı motorudur. Tabii ki, WebKit ayrıca diğer mobil cihazlarda da kullanılmaktadır, ancak bu makalenin çerçevesinde, kendimizi iPhone ve Android platformlarının dikkate alınmasıyla kısıtlayacağız.

Webkit, K masaüstü ortamının (KDE) gelişiminden kaynaklanan açık kaynaklı bir projedir. Mobil cihazlar için modern web uygulamalarının görünüşleriyle gerekli olduğu webkit projesidir. Mobil cihazın teknolojik ve tasarım özellikleri, elbette, önemli bir rol oynamaktadır, ancak mobil kullanıcılar öncelikle içerikle ilgileniyorlar. Mobil cihaz, yalnızca İnternet içeriğinin küçük kısmına erişim sağlarsa, en popüler cihazların en iyi listesine girebilmesi muhtemel değildir.

Çoğumuz tam bir yaşam sürmeyi tercih ediyoruz: Bir web sitesini evde oturan bir dizüstü bilgisayarda açarsak, bu siteyi trende otururken açtığımızda aynı içeriği görmeyi bekliyoruz. İçerik, mobil uygulamaların ana sorunudur. Nerede olduğumuzdan bağımsız olarak ve ne yaptığımız, ilgilendiğiniz verilere erişime ihtiyacımız var. WebKit teknolojisi, iPhone ve Android platformlarında tam teşekküllü içerik sağlar.

Webkit'in, örneğin Mac OS X platformunun ana tarayıcısı olan Safari Tarayıcısında, Masaüstü Bilgisayarlarda da kullanıldığını belirtmekte fayda var. Ne olursa olsun, iPhone veya Android için masaüstü bilgisayarlar veya bir tarayıcı motoru HTML ve CSS'yi destekleyen en gelişmiş teknolojidir. Aslında, WebKit, henüz diğer motorlardaki tarayıcılar tarafından görüntülenmeyen CSS stillerini destekler - örneğin, HTML5 spesifikasyonu tarafından tanımlanan bir dizi özellik belirleyebilirsiniz.

HTML5, SQL desteği, hareket, dönüşüm vb. Gibi, istemci tarafındaki veri ambarları gibi tarayıcıların kullanımına dayanan teknolojileri tanımlayan bir dizi ön teknik özelliklerdir. Bununla birlikte, HTML5 spesifikasyonunun gelişimi hala bittiği zaman, temel ilkeler çoğu platformda tarayıcılarda açıkça formüle edilip uygulanmaz, web uygulamalarının geliştirilmesinin çok mütevazı bir başlangıç \u200b\u200başaması unutulmaz. Web Uygulama Geliştirme, yazılımın geliştirilmesinde önemli bir segment alacak ve bu sadece masaüstü tarayıcıları için değil, aynı zamanda mobil tarayıcılar için de geçerlidir. Yan üründen, mobil uygulamalar web uygulama pazarındaki ana ürüne dönüşecektir.

Mobil Web Uygulamaları Geliştirme'nin Yapıcı Özellikleri

Web geliştirme teknolojilerini ustalaşmaya karar verdiyseniz, emrinizde çok sınırlı bir fon seçimidir. Her şeyden önce, uygulama doğrudan sunucuya HTML kodunu, CSS ve JavaScript içeren bir dosya olarak oluşturulabilir. Aynı zamanda, HTML içeriği, statik HTML dosyaları şeklinde sağlanabilir ve sunucu tarafında çalışan, örneğin PHP, ASP.NET, Java Servletleri gibi çeşitli teknolojilerin kullanımı nedeniyle dinamik olarak oluşturulabilir. Zaten, bu makalede ele alınan sorunların noktası vizyonundan, her şey HTML koduna gelir ve burada bizim için en önemli şey, WebKit teknolojisinin tarayıcıların mobil cihazlarda HTML oynatmasına izin vermesidir.

Bir mobil cihazda (iPhone veya Android) bir web uygulamasını çalıştırmak için, kullanıcının tarayıcıyı başlatması ve ilgili servisin URL'sini girmesi gerekir, örneğin: http://yourcompanyname.com/applicationurl.

Bu durumda, önerilen mobil web uygulamalarının aralığı oldukça geniştir: Standart Web sitesinden özel olarak belirli bir mobil platform için tasarlanmış bir mobil web uygulamasına.

Standart siteleri görüntüle

Webkit motoru, iPhone ve Android platformlarının sezgisel ve kullanıcı dostu bir kullanıcı arayüzüyle kombinasyon halinde, mobil cihazınızdaki hemen hemen her web sitesini görüntülemenizi sağlar. Web sayfaları, rastgele içerik parçalarını rastgele aktaran veya bunları hiç göstermeyen önceki nesil mobil tarayıcıların aksine oldukça doğru görüntülenir. Bir WebKIT destek tarayıcısına sayfa indirirken, sayfanın içeriği genellikle ölçeklenir. Aynı zamanda, ölçek, tüm sayfanın tamamen ekranda takıldığı şekilde seçilir, ancak güçlü bir şekilde azaltılmış, genellikle belirgin bir şekilde, Şekil l'de gösterildiği gibi, sayfada kaydırılabilir, arttırılabilir, Tüm içerik öğelerine rahat erişim sağlamak, hareket ettirin. Varsayılan olarak, tarayıcı 980 piksel genişliğinde bir pencere kullanır.

Tarayıcı penceresindeki web sayfasının tam görüntüsünün, önceki nesil tarayıcıları kullanma deneyimiyle karşılaştırıldığında önemli bir başarı olmasına rağmen, modern mobil teknolojilerin olanakları bununla sınırlı değildir.

Mobil özellikleri dikkate alarak oluşturulan web sayfaları

Web sayfanızın yalnızca düzenli ağ kullanıcıları için değil, aynı zamanda mobil kullanıcılara da mevcut olmasını istiyorsanız, mobil web uygulamalarını optimize etmek için birkaç olasılık daha dikkate almaya değer.

WebKit'in web sayfasını mobil cihaz ekranında doğru şekilde görüntülemenizi sağladığına rağmen, taşınabilir veya masaüstü bilgisayarlar gibi bir fare kullanan cihazlar arasında belirli bir fark vardır ve iPhone veya Android akıllı telefonlar gibi dokunma cihazları. Duyusal cihazlar, "Tıklama" alanının fiziksel boyutları ile ayırt edilir, imleç kılavuzunun eksikliği, herhangi bir elemana ve başka bir olay dizisi. Böylece, hem normal hem de mobil kullanıcılar için uygun olacak bir Web sitesi oluşturmak istiyorsanız, mobil cihazların aşağıdaki özelliklerini göz önünde bulundurmanız gerekir:

• Tarayıcılar iPhone ve Android "Okunabilir" web sayfasını gösterebiliyor - Bu tarayıcıların ekranının kalitesi, standart mobil tarayıcılarınkinden önemli ölçüde daha yüksektir - bu nedenle sitenizin tasarımını basitleştirmek için acele etmeyin.
• Parmakların yastıklarının boyutu, fare işaretçisinin boyutunu önemli ölçüde aşıyor. Site navigasyon maddelerinin geliştirilmesinde bu faktörü düşünün. Bağlantıları birbirine çok yakın yerleştirmeyin, aksi takdirde kullanıcı aynı anda bantlanmamış aynı bağlantıya tıklayamayacaktır.
• İmleci gezinirken gösterilen elemanlar mobil cihazlarda çalışmaz. Kullanıcı sadece bir fare imleci gibi herhangi bir öğede bir parmağını "vurgulayamaz".
• Fare düğmesine basarak ve fare düğmesine basarak, fareyi sürükleyerek, vs., dokunma ekranlarında tanımlanan olaylar başka bir şekilde uygulanır. Bu olayların bazıları mobil cihazlar üzerinde çalışabilecek, ancak genel olarak mobil tarayıcının ve masaüstü tarayıcısının aynı eylem dizilerini gerçekleştireceğini saymamalıdır.

Bu konuların makalesinde ayrıntılı bir tartışmayı bulabilirsiniz " iphone eylem."(Bkz. Bölüm). Makalemizde, kendimizi webkit avantajlarının göz önünde bulundurulmasına, kusurlarını değil, hatalarını kısıtlayacağız.

Web sitelerine, yani sınırlı ekran boyutuna erişerken iPhone veya Android kullanıcılarının karşılaştığı en belirgin sorunu göz önünde bulundurun. Aslında, modern bir mobil cihazın ekranı, kullanıcının web içeriğini peyzaj yapılandırmasında görüntülemeyi tercih etmesi koşuluyla, 320x480 veya 480x320 boyutuna sahiptir. Şekil 1'den görülebileceği gibi, WebKit standart masaüstleri için tasarlanmış bir Web sayfasını doğru bir şekilde görüntüleyebilir. Bununla birlikte, bir web sayfasını ölçeklendirirken, metni okumak için çok küçük olabilir, bu nedenle kullanıcı, metni okuyabilmesinden önce kaydırma, kaydırma ve artma işlevlerini kullanmak zorunda kalacaktır. Bu kısıtlama ile nasıl başa çıkılır?

Bir sayfa oluşturmanın en kolay yolu, mobil tarayıcı penceresinde ve masaüstü tarayıcı penceresinde eşit derecede iyi görüntülenir, bu özel bir meta etiketinin kullanımıdır. viewport..

Meta etiketi, HTML belge başlığına yerleştirilmiş bir HTML etiketidir. Viewport etiketini kullanmanın en kolay örneği şöyle görünür: . Bu meta etiketini HTML sayfasına eklerken, mobil tarayıcı penceresindeki haritalama en iyi şekilde ölçeklendirilir (bkz. Şekil 2). Viewport'u desteklemeyen tarayıcılar bu etiketi sadece görmezden gelir.

Bazı durumlarda, Şekil 3'te gösterildiği gibi, pencere ölçeklendirme parametrelerini önceden belirlemek faydalıdır.

Spesifik ölçekleme parametrelerini belirlemek için, İçeriğin tam değerini belirtin Meta Tag Viewport: . İlk ölçek parametresinin değerini değiştirerek, görüntü azaltılabilir veya arttırılabilir. İphone platformları için ve Android daha iyi Değerleri 1.0 ila 1.3 arasında kullanın. Viewport meta etiketi ayrıca, kullanıcının indirme sırasında sayfa ölçeğini değiştirme yeteneğini sınırlamanızı sağlayan minimum ve maksimum ölçeği de destekler.

İPhone'un tasarım özellikleri, özellikle 320x480 ekranın boyutu, görünüşünden bu yana pratik olarak değişmemiştir, Android platformundaki cihaz parametreleri oldukça geniş bir yelpazeye sahiptir, çünkü bu platformdaki mobil cihazlar çeşitli üreticiler tarafından üretilir ve çeşitli kullanıcı grupları için tasarlanmıştır. Böylece, web uygulamanızın mobil kullanıcılarla popüler olmasını istiyorsanız, ekranın boyutu ve çözünürlüğünde olası bir farkı ve Android cihazların tasarım özelliklerini düşünmelisiniz.

Tecrübe, Android'e dayalı çeşitli mobil cihazlar arasında var olan yapıcı farklılıkların yanı sıra, Android yazılımının kendisi, mobil cihaz tarayıcısının özelliklerine bağlı olarak indirilebilir web sayfasının ayarlarını ayarlamaya çalışıyor. İstikrarın yanı sıra, Android platformu sürekli değişen bir fonksiyon ve yetenek kümesiyle karakterize edilir. Android'e dayalı belirli bir cihazın ayarları, büyük olasılıkla gelişme ortamınızın ayarlarından farklı olacaktır. sDK sürümü ve cihazın üreticisi. Şekil 4, V1.6 Android Emulator sürümündeki tarayıcı kurulum ekranını göstermektedir. Ekran Ayarları, kullanıcıya ekrandaki görüntü ölçeklendirme seviyesini (uzak, yakın, orta) belirleme veya otomatik sayfa ölçeklendirme modunu seçin.

Mobil cihazların dünyasında, en sabit değer değişiktir, böylece mobil yazılım pazarının geliştirilmesi ve güncellenmesi dikkate alınmalıdır. Örneğin, Sprint kahraman tarayıcı ayarları, web sayfasını yüklerken kullanılan standart parametrelerden temel olarak farklı olan bir seçenek grubunu içerir. Kahraman tarayıcı, HTC tarafından yapılan bir dizi modifikasyon kullanarak Android V1.5 platformunda oluşturulmuştur. Neyse ki, Meta Tag viewport kullanırken, belirli kahraman ayarları göz ardı edilecektir.

Şimdiye kadar, webkit'in, güçlü bir şekilde azaltılmış ve zor bir biçimde olmasına rağmen, web sayfasının indirilmesiyle tamamen başa çıktığını gördük. Daha sonra, ViewPort meta etiketinin kullanımı yoluyla mobil cihazın ekranında sayfanın nasıl görüntülendiğini kontrol ettik. Şimdi görüntülenen sayfa okumak ve gezinmek için çok daha uygundur. Ancak bu sayfamızın bir web uygulaması olarak görünmesi ve çalışması için hala yeterli değil.

Mobil cihazlar için yapılmış

Mobil seyirciye yönelik bir web balinasının tasarım özelliklerinin dikkate alınmasına izin verin. Belirli bir örnek olarak, Google E-posta Servis Kayıt sayfasını göz önünde bulundurun.

Bu sayfa masaüstü tarayıcı penceresinde görünüyor:

Masaüstü tarayıcı penceresinde, sol tarafta bilgi içeriği görüntülenir ve kayıt penceresinin kendisi sağ bölmededir. Mobil tarayıcı penceresinde, aynı sayfa tamamen farklı bir görünüme sahiptir.

Şekil 6'da gösterilen sayfa kesinlikle mobil kullanıcılar için tasarlanmıştır. Yalnızca kullanıcı tarafından istenen sayfa öğeleri ekranda daha fazla iş için görüntülenir - ek kaydırma, ofset veya ölçeklendirme gerekmez.

Şimdi pencereyi görmeyi düşünün e-posta Gmail'in mobil versiyonu. Uygulamaya sunulan ekran boşluğu çok sınırlı olduğundan, Mesaj Görüntüleme penceresinin isteğe bağlı bir düğme ve navigasyon öğeleri vardır. Bu durumda, görüntülenen navigasyon elemanları, mesajları görüntülemek için pencereyi üst üste gelir. Ek olarak, kaçınılabiliyorsa çok fazla kare veya DIV kaydırma öğesi kullanmamalısınız. Gmail Mobile Version, bu sorunu, kullanıcı sayfanın kaydırılmasını tamamladığı anda görünen bir açılır menü kullanarak çözer. Açılır menü 3 düğme içerir: Arşiv., Silmek. ve Daha. Düğmeye basmak Daha Ek menü öğeleri belirir (bkz. Şekil 7).

Bu gerçekten mobil cihazlar için geliştirilen bir uygulamadır.

Tasarımı kasıtlı olarak silmek ve iPhone ve Android platformları için çok işlevli tarayıcılar geliştirmiş çalışan mobil kullanıcıların olanaklarını azaltmak istemeyeceğimizi akılda tutulmalıdır. Bu açıdan, gmail sayfasının altındaki gösterilen elemana dikkat etmek faydalıdır (bkz. Şekil 8):

Kullanıcı, masaüstü sürümünün genişletilmiş sürümünü tercih ederse, uygun sayfayı indirme yeteneği sağlayın.

Şimdi, Web teknolojisini kullanarak bir uygulama oluşturmak istediğinizde durumu göz önünde bulundurun, ancak "Yerel" mobil uygulamaya benziyor.

İçerik Özel Platform

Bir sonraki adım, belirli bir mobil platforma özgü içerik geliştirmektir. Bu durumda, sayfanın formatı ve arayüzü, sayfanın belirli bir platform için "yerel" bir uygulama gibi görüneceği şekilde belirlenir ve standart bir Web sitesi olarak değil genel erişim. "Yerel" uygulaması ile ne demek istiyoruz?

Bir web uygulamasının belirli bir platform için "yerli" bir uygulamaya mümkün olduğu kadarıyla nasıl yapıldığına dair tartışmaya girmeden önce, iPhone ve Android tarayıcılarının genel özelliklerini bir kenara bırakalım ve aralarında var olan görsel farklılıklara kısaca odaklanacağım. Bu platformlar.

İPhone uygulamalarının kendi özel ve arabirimlerine sahiptir. Birine anlık görüntü göster ekran iphone Ve, bu kişi kelimenin tam anlamıyla aydan düşmediği sürece, neredeyse kesinlikle bunun bir iPhone olduğunu söyleyecek. Aynı kişiyi, Android'e göre mobil cihazın ekranının bir resmini göster ve cevap bu kadar kesin olmayacak. Sebebi ne? Birkaç muhtemel açıklama var. İlk olarak, iPhone, Android'e dayanan ve çok sayıda hayranı edilmeyi başardı. Kuyrukta duran insanları, V1 iPhone'un sınırlı özellikleri için önemli para ödeyecek. Senin gibi iPhone ya da değil elma ürünü şu anda pazar lideridir. Android ile durum nedir?

Android platformu nispeten yeni bir üründür ve birçok açıdan, bir iPhone antipode olarak işlev görür, çünkü öncelikle açık topluluk için tasarlanmıştır. Android platformu en çok kullanılıyor farklı cihazlar (telefonlar ve diğer ev aletleri). Bu makalede tartışma kolaylığı için, kendimizi cep telefonlarında Android kullanımına sınırlayacağız.

Zamanla, Android'e dayanan dünyadaki cihazların sayısı iPhone miktarını aşacaktır. Bu, Android platform cihazlarının bir dizi şirket tarafından verildiğinden ve en farklı veri ağları tarafından destekleneceği gerçeğiyle açıklanmaktadır. Android mobil pazarında böyle önemli sayıda oyuncu ile, şüphesiz, cihazların görünüm ve parametrelerine dayanarak piyasanın belirli bir parçalanmasını beklemek. Bu eğilim, HTC şirketinden SENSEUI arayüzü örneğinde izlenir. Bu çekici görünüm Ve arayüz, Android SDK'nın temel sürümleri tarafından desteklenmiyor ve diğer Android veritabanı cihazlarıyla uyumlu değil. Motorola, Google ve Verizon, Android'e dayanan yeni bir droid cihaz geliştirme çabalarını birleştirdi. Bu, Android sürüm 2.0 platformunda ilk ticari üründür.

Çeşitli Android tabanlı sistemleri iPhone'un üniforması ile karşılaştırın. iPhone, Apple'ın özellikle değerli bir özelliğidir. İPhone uygulamalarının görünümü, zamanla hafifçe değiştirebilir, ancak bu küçük değişikliklerin karşılaştırılması muhtemel değildir. Çeşitli versiyonlar Android sistemleri, platformun gelişiminin en başında olduğunda bile, şimdi bile yeterince büyük.

Öyleyse, görünüşü en üst düzeye çıkarmak için ne yapılması gerektiği ve "Yerli" programlarına bir uygulama arayüzü?

Eğer böyle bir görev, web 2.0 görünümünden önce bize bakıyorsa, gerçekten ciddi bir sorun olur. Birden fazla istemci tarayıcıyı (mobil ve durağan) desteklemek için erken girişimler, örneğin birkaç yaklaşımın kullanımına dayanıyordu:

• Tamamen paralel alanların gelişimi
• Kullanıcıjent parametresine bağlı olarak dinamik içerik oluşturma
• Her özel cihaza bağlı olarak içeriği dönüştürebilecek proxy sunucularını kullanın. Benzer teknoloji, bir müşterinin mobil cihazından e-postaya erişim organize etmek için RIM tarafından başarıyla kullanılmıştır.

Bu yaklaşımlar, gelişmenin büyük finanse edilen ekipler tarafından yapıldığı durumlarda oldukça kabul edilebilir olabilir. Ve dünyanın geri kalanını ne yapmalı? Herkesin önemli finansal kaynakları, yüksek nitelikli uzmanlar ve bu stratejileri uygulamak için sınırsız bir zaman geçirmez. Buna ek olarak, daha önce belirttiğimiz gibi, önceki nesil tarayıcıların mobil interneti kullanılmakta rahat veya popüler olarak adlandırılamaz, bu nedenle eski yöntemler ve yaklaşımlarda durmamalısınız.

Neyse ki, bunu yapmak zorunda değiliz. WebKIT ve CSS döneminde, çeşitli mobil cihazların görünümündeki ve arayüzündeki fark, belirli bir cihaz türüne bağlı olarak farklı stilleri kullanabilmenizi sağlayan stiller ve medya sorguları (medya sorgusu) tarzını kullanarak üstesinden gelinebilir. Medya İsteği Teknolojisi, müşteri hakkında bilgi almanızı sağlar. Geleneksel olarak, tarayıcı, sunucuya belirli bir tarayıcıyı tanımlamasını ve müşteriye iletilmesi gereken içerik tanımlamasını sağlayan sunucuya bir kullanıcıyı gönderir. Media-Query kullanarak, tarayıcı, yeteneklerine göre sayfanın stilini seçer. Aşağıdaki örnek, akıllı telefonlar için tasarlanmış stil tablonun seçimini göstermektedir: . Ve bu istek, masaüstü bilgisayarlar için stil tablosunu belirler: .

Internet Explorer v6.

Bu yazı sırasında, Internet Explorer V6, ortak tarayıcı pazarının yaklaşık% 20-30'unu işgal etti, ancak IE V6 yeteneklerinin değerlendirilmesi bu makalenin görevlerine dahil değildir.

Medya sorguları hakkında daha ayrıntılı bilgi, spesifikasyonun ön sürümünde bulabilirsiniz (bkz. Bölüm).

Ağ sunucularının durumunu gösteren bir uygulama geliştirmek için medya sorgularını kullanmanın bir örneğini düşünün.

Ağ İzleme Programı

Bu uygulamanın görevi birkaç sunucunun çalışmasını izlemektir. Bağımsız yazılım geliştiricileri genellikle birden fazla sunucuda birden fazla uygulamaya destek sağlamak zorundadır. İstediğiniz zaman geliştiriyorsanız, daha önce farklı türde sunucu türleri ve farklı uygulama türleri arasında geldiniz. Bütün bunlar, gerekli tüm uygulamaların çalışmalarını izlemek için tek bir araç kullanamadığınızda bu durumun oldukça mümkün olduğu anlamına gelir. Bu durumda, faydalanmak mantıklı mobil uygulama Ağ İzleme için (Netmon). Uygulama, gerekli tüm işlevleri sağlarken, mobil cihaza erişmek için yeterince esnek ve uygun hale gelir.

Netmon uygulaması, işi izlenmeli sunucuların bir listesini içerir. Her sunucu için, kilit performans göstergeleri (KPI) toplanır. Temel Performans Göstergeleri - Uzun yıllar boyunca MBA öğrencilerini mevcut iş koşulunu değerlendirmek için kullandığı ana araç. Web uygulamalarının barındırma açısından, aşağıdaki göstergeler KPI olarak kullanılabilir:

• Geçen süre boyunca işlem sayısı
  • Emirler
  • Katalog İstekleri
  • E-posta mesajları
  • Sayfa Görünüm Sayısı
• Son işlemden bu yana geçen süre
  • Sipariş
  • Exchange Elektronik Verileri
  • İş Ortağından Mesajlar
  • FTP üzerinden satıcıdan dosyayı indirin
• Veritabanı mevcut mu
• Son yedekleme tarihi
• Ortalama sipariş miktarı (dolar cinsinden)
• Ses boş alan Diskte
• Son saat, gün, ay için bant genişliği

Yukarıdaki göstergeler ve diğer benzer operasyonel parametreler, belirli bir sistemin veya uygulamanın durumunu tahmin etmenizi sağlar. Bu nedenle, örneğin, tatil sezonunda, bazı sitelerimize verilen siparişlerin sayısını görüyoruz. Veriler her saatinde siparişlerde istikrarlı bir artış göstermezse, durumun daha ayrıntılı bir analizini gerçekleştiririz.

Belirli bir uygulamanın çalışmaları koşullarını ve kaynaklarını gerektirdiğinden, Netmon, her uygulamanın özelliklerini dikkate almak için yeterli esnekliğe sahip olmalıdır. Böyle bir esneklik seviyesini sağlamak için, her sistem için durum parametrelerini göz önünde bulundurmanıza izin veren verilerin en genel yapısının tanımlanmasıyla başlayacağız. 2. bölümde, bu verilerin nereden geldiği ve nasıl güncellendikleri konusunda daha ayrıntılı olarak tartışacağız. Şimdiye kadar, kendimizi aşağıdaki bilgilere sınırlandırın:

• Site adı
• Site URL'si (ana sayfa)
• Güncellemeler için URL
• Durum: Tamam ya da değil
• Kısa özet: Sunucu durumunun bir açıklaması, ya OK değerine sahip olacak veya bu sunucu için en ciddi sorunu gösteren bir metin dizgisi içeren bir metin dizgisi içeriyor
• ELEMANLAR: Bu, karşılık gelen site için geçerli KPI değerlerini iletmemiz gereken bir çift sayı / değeridir.

Uygulamamız, kullanıcının problem alanlarına dikkatini çekmek için maksimum CSS, jQuery ve WebKit özelliklerinin maksimum kullanımına gitmek için elverişli verimlilik göstergelerini görüntüleyecektir. Daha önce de belirttiğimiz gibi, bu uygulamayı geliştirmedeki ana hedef, iPhone, Android platformunda ve Safari tarayıcısındaki masaüstünde yürütme yeteneğidir.

Ağ İzlemesi için bir uygulamanın geliştirilmesi

Modern web sayfaları, sayfanın örgütsel yapısını ve içeriğini tanımlayan bildirim formunda oluşturulmalıdır. Bir sayfayı konumlandırma ve biçimlendirme Basamaklı tablolar kullanılarak gerçekleştirilir. stilleri CSS. Ve çoğu durumda JavaScript kullanarak. Aslında, JavaScript kütüphaneleri bu kadar popüler hale geldi ki, bugün kullanımlarının bir istisna dışında bir kural olduğunu. Bu makalede ele alınan eki, popüler Javascript jquery kütüphanesini kullanacağız. Başvurumuz iPhone, Android platformunda ve masaüstünde yapılacaktır. Bu aynı HTML kodunu kullanır ve gerekli tüm farklılıklar stillerde uygulanacaktır. Burada, uygulamanın cazip bir görünümünü geliştirmek için önemli bir çaba sarf etmediğimizde belirtilmelidir. Ayrıca, tekerlekler, okuyucunun tarz sayfalarının organizasyonuna ilave dikkatini çekmek için farklı bir renge sahip olmak için birbirleriyle uyumsuz bir arka plan olarak bilinçli olarak seçildi. 2. Bölümde, uygulamanın görünümünü biraz iyileştirirken, HTML kodu listeleme 1'de gösterilen gibi görünüyor.

Liste 1. HTMLD Uygulaması

Sunucularım

Kullanıcı aracımım.

Önerilen HTML kodunun hızlı bir şekilde görüntülenmesi, aşağıdaki ana özellikleri tahsisemenizi sağlar:

• Kod, iki harici JavaScript dosyası kullanır: bir jquery kitaplığı dosyası ve uygulamamız için bir yardımcı dosyayı kullanır.
• Viewport meta etiketini kullanarak görüntülenebilir içeriği kodda ölçeklendirmek için.
• Ana stil sayfası NETMON.CSS dosyası tarafından belirlenir.
• Yardımcı stil sayfasını belirlemek için, Kullanıcıjent parametresini kullanın. Değerine bağlı olarak, stil sayfası iPhone, Android veya bir masaüstü tarayıcısı için yüklenecektir.
• Bir sayfayı yükleme işleminde, Netmon.js dosyasında tanımlanan jQuery ve yardımcı fonksiyonu, verileri görüntülemek için kullanılır.
• Ana sayfa kodunda, birkaç DIV etiketi kullanılır.
• Son olarak, kodda, kullanıcıya ait dizeyi gösteren sayfaya bir bağlantı vardır. Bu bağlantının, uygulamanın uygulanmasıyla ilgisi yoktur ve sadece gösteri için kullanılır.

Aslında, uygulamanın temel işlemini belirleyen stil sayfalarının ve NETMON.JS dosyasının ayrıntılı analizine geçmeden önce, başvurumuza mevcut durumuna bakalım. Bir kez daha, üç farklı stil sayfasını kullandığımızı unutmayın: Desteklenen üç platformun her biri için bir tane. Böylece uygulama geliştirme işlemi daha görsel olarak, her tablo arka plan rengini belirler. Şekil 9'da, sayfamız masaüstü safari masaüstü tarayıcısında açık ve mavi bir arka planı vardır.

Şekil 11, iPhone tarayıcı penceresindeki uygulamanın görünümünü göstermektedir (arka plan rengi - yeşil).

Netmon.js dosyasında depolanan ana stil tablosu 2 listede gösterilmektedir.

2. Temel Stil Sayfası

Gövde (Renk: # 888888; Yazı Tipi-Ailesi: Helvetica; Yazı Tipi Boyutu: 14px; Marjı: 0px; Dolgu: 0;) .Details (Marj: 0px; Dolgu: 0px; Arka Plan-Renk: Beyaz; Sınır: Katı; Sınır -Width: 1px; -Webkit-Sınır üst-sol-yarıçapı: 8px; -Webkit-Sınır-üst sağ yarıçap: 8PX; -Webkit-Sınır-alt-sol-yarıçapı: 8PX; -WebKit-Sınır-alt -Right-radius: 8px;) .OK (Renk: # 000000;) .Bad (Renk: # FF0000;) .ODD (arka plan-resim: -Webkit-degrade (doğrusal, sol üst, sağ alt, (#ccc ), (# 999));) .even (arka plan-görüntü: -Webkit-gradyan (doğrusal, sol üst, sağ alt, (# 999), (#ccc));) .Serverentry A (şamandıra: Doğru; renk: #fffffff;) .Serveritems (renk: # 000;) #header h1 (Marj: 0; Dolgu: 0; Metin Hizası: Merkez; Renk: # 000;)

Her platform için stiller tablosunu kullanma Aşağıdaki görevleri uygulamanıza izin verir:

1. Sayfanın renk kararını değiştirin. Bu, öncelikle, stil sayfasının rolünü açıkça göstermek ve ikinci olarak, kullanıcısal parametrenin değerine bağlı olarak istediğiniz stil sayfasını seçmenin ne kadar kolay olduğunu göstermek için izin verir.
2. Mobil ve masaüstü platformu için farklı yazı tipi boyutunu ayarlayın.
3. Uygun WebKIT işlevlerini kontrol edin. Tarayıcı, WebKit desteği olmadan çalışmak için kullanılıyorsa, örneğin Firefox.

Liste 3, iPhone.css dosyasını gösterir.

Liste 3. iPhone.css dosyası

Gövde (arka plan rengi: # 00ff00;) .Serverentry (-Webkit-Sınır-üst-sol-yarıçap: 8px; -Webkit-Sınır-üst-sağ yarıçap: 8PX; -Webkit-Sınır-Sol-sol-yarıçap: 8px; -Webkit-Sınır-alt-sağ yarıçapı: 8px;) .Name (yazı tipi boyutu: 2EM;) .Summary (yazı tipi boyutu: 1.5em;) .Serverentry A (Yazı tipi boyutu: 1.5EM;)

Gördüğümüz gibi, gövde etiketinin (# 00FF00) arka plan rengi olarak yeşil bir renk kullanılır ve yazı tipi boyutu mobil cihaz ekranından daha uygun bir okuma için yapılandırılmıştır. Son olarak, sunucuların listesini ve her sunucuyu çıkaran bir işlevi tanımlayan Netmon.js dosyasına bir göz atalım (4 listede kullanılır). Brevity için dosya kodunun bir parçası kaçırıldı, tam metin bölümünde mevcuttur).

Liste 4. netmon.js dosyası

Var Netmon \u003d (Başlangıç: İşlev () () (), Kaynaklar: [İsim: "Msiservices.com", Homeurl: "http://msiservices.com", pingurl: "http://msisisvis.com/netmon.php" , Durum: "Tamam", Özet: "OK", Öğeler: [İsim: "DiskSpace", Değer: "22.13 gb"), (İsim: "Veritabanı Yukarı?", Değer: "YES")]) (ADI: "Sunucu 2", Homeurl: "http: // someurl", pingurl: "http: //someurl/netmon.jsp", durum: "Tamam", Özet: "OK", Öğeler: [İsim: "DiskSpace", Değer: "100.8 GB"), (İsim: "Veritabanı Yukarı?", Değer: "YES")]), // KREVITY için kesilmiş ek girişler], Fonksiyon (Dizin, ITM) (Try ret \u003d "; Ret + \u003d "

"; Ret + \u003d" "+ İtm.name +" Göstermek.
"; eğer (iTm.status! \u003d" OK ") (RET + \u003d" - "+ itm.Summary +"
";) Ret + \u003d"

"; JQuery.Each (ITM.Items, işlev (J, ItemDetail) (RET + \u003d"\u003e "+ itemdetail.name +" \u003d "+ itemdetail.value +"
";)); Ret + \u003d"

"; Ret + \u003d"

"; Geri dönüş ret;) yakalamak (e) (geri dönüş

Hata oluşturma öğesi ["+ \u200b\u200bitm.Name +"] "+ E +"

"; } } };

Bir sunucunun durum çubuğu Tamam'a eşit değilse, karşılık gelen sunucu kaydı, CSS dosyasındaki sınıf tanımından görülebileceği gibi kırmızı olarak görüntülenir. Ek olarak, sunucunun durum kontrolü bazı sorunlar ortaya çıkardıysa (durum Tamam'a eşit değildir), ek olarak çıktı kısa Açıklama Sorunlar. Şekiller 9-11, sunucunun 4 boş disk alanı olmadığını göstermektedir. Bu sunucunun dizesini tıkladığınızda, ekranda ayrıntılı bir mesaj görüntülenir (bkz. Şekil 12).

Bağlantıya tıkladığınızda göstermek. Sunucu adının sağında, bu sunucunun ana sayfası açılır. Böyle bir bağlantının varlığı iki nedenden dolayı çok uygundur: Birincisi, her bir sunucunun URL'sini ezberlemek için hoş olmayan ihtiyaçtan sizi rahatsız edecek ve ikinci olarak, bu URL'yi bu URL'yi girmek için daha fazla şeyden kurtarır. Bir mobil cihazın klavyesi (en rahat bile olsun).

Bu nedenle, mobil cihazınızda NETMON'u başarıyla başlatmayı başarırsak, sunucu desteğinin görevi herhangi bir soruna neden olmamalıdır.

Sonuç

Bu makale, WebKit teknolojisini kullanarak iPhone ve Android için web uygulamaları geliştirme ilkelerini tanıtmaktadır. 2. bölümde, AJAX çağrıları kullanarak veri güncelleme işlevini ekleyerek uygulamamızın yeteneklerini genişleteceğiz.

Birçoğumuz için geliştiriciler, Webkit - Kara Kutu. BT HTML, CSS, JS ve bir demet görüntü ve webkit, bir şekilde ... sihirli bir şekilde atıyoruz, bize bakan ve iyi çalışan bir web sayfasını verir.
Ama aslında beğen meslektaşı Ilya grigorik diyor :

Web Kiti. değil siyah kutu. Bu beyaz bir kutu. Ve sadece beyaz değil, aynı zamanda açık Kutu.

Öyleyse, bazı şeyleri anlamaya çalışalım:

• Webkit nedir?
• Webkit nedir?
• WebKit webkit tarayıcılarını nasıl kullanır?
• Neden webkit-s aynı değil?

Şimdi, özellikle operanın WebKit'e taşındığı haberlerden sonra, birçok WebKit tarayıcısıyla çevriliyoruz ve birleştiklerini ve kendi yollarına gittiklerini söylemek oldukça zor. Aşağıda, umarım bu soruya biraz ışık tutmaya çalışacağız. Sonuç olarak, tarayıcı arasındaki ayrımı daha iyi belirleyebilir, doğru izleyiciye böcek gönderir ve çapraz tarayıcı gelişimini daha verimli hale getirin.

Standart Web Tarayıcı Bileşenleri

Modern tarayıcıların birkaç bileşenini listeleyelim:

• Ayrıştırma (HTML, XML, CSS, JavaScript Analizi)
• Yerleşim)
• Metin ve grafik oluşturma
• Kod çözme görüntüleri
• GPU ile etkileşim.
• Ağa erişim
• Donanım ivmesi

Bunlardan hangisi tüm WebKit tarayıcılarında yaygındır? Büyük ölçüde, sadece ilk ikisi.

Kalan bileşenler her webkit "port" kendi yolunda uygular. Ne demek onunla ilgilenelim.

Webkit portları

Çok fazla webkit "limanı" var ve Aria Hidatyat, WebKit Hacker ve bunları sağladım. Sencha'daki Direktör bunu anlatmaya yönelik:

Webkit için en popüler bir ilişki genellikle, Mac OS X'te (birinci ve orijinal WebKit kütüphanesi) çalışan Apple'lardan WebKit-A'nın görüntüsüdür. Tahmin edebileceğiniz gibi, çeşitli yerli Mac OS X kütüphaneleri kullanılarak çeşitli arayüzler uygulanır, çoğunlukla Corefoundation bileşenine odaklanmıştır. Örneğin, bir renk düz düğmesi tanımlarsanız, özel bir devre yarıçapı ile WebKit bu düğmenin nerede ve nasıl çizileceğini bilir. Aynı zamanda, düğmenin nihai çizimi (kullanıcı monitöründeki piksel şeklinde) CoreGraphics'in omuzlarında yatar.

Yukarıda bahsettiğim gibi, kullanılan CoreGraphics her port webkit için benzersizdir. Mac-A için Chrome, örneğin, Kayak kullanır.

Bir noktada, Webkit, hem masaüstünde hem de mobil cihazlar için farklı platformlar için "taşındı". Bu varyasyon genellikle "WebKit Limanı" olarak adlandırılır. Safari pencereleri için, Apple ayrıca bağımsız olarak WebKit'i (sınırlı uygulama ile) Corefoundation Kütüphanesi'ni kullanarak Windows altında çalışacak şekilde değiştirdi.

... Windows'un altındaki safari olmasına rağmen artık öldü.

Ek olarak, diğer birçok "liman" da vardı (tam listeye bakınız). Google, Chromium portunu desteklemek için yarattı ve keser. GTK + tabanlı bir webkitgtk de var. Nokia (ve şimdi Bükülmüş olan Trolltech, QtwebKit modülü olarak popüler olan WebKit QT portunu destekler.

Bazı limanlar webkit

• Safari.
  - Windows altında Safari ve Windows altında Safari İki Farklı Bağlantı Noktası
  - WebKit Night Meclisi, Safari için kullanılan Mac "portunun" kaynak kodunun bir montajıdır, yalnızca daha yeni
• Mobil safari.
  - Özel bir şubede geliştirildi, ancak daha sonra açıldı.
  - IOS altında Chrome (Apple'ın WebView; Fark hakkında biraz daha sonra)
• Krom (krom)
  - Android altındaki Chrome (doğrudan kullanır "port" chromium)
  - Chromium ayrıca tarayıcıların temelidir: Yandex ,, SOGOU ve yakında Opera.
• Android tarayıcı
  - Sürüm sırasında mevcut olan en son WebKit kaynak kodunu kullanır.
• Daha da fazla liman: Amazon ipek, yunus, böğürtlen, qtwebkit, webkitgtk +, efl limanı (tizen), wxwebkit, webkitwince, vb

Farklı bağlantı noktalar farklı görevlere odaklanabilir. Mac Port Odaklanma - Tarayıcı ile işletim sistemi arasında ayrılma ve motorun oluşturulmasını yerli uygulamalara gömmek için OBJ-C ve C ++ bağlantısı sağlanması. Odak krom bağlantı noktası tamamen tarayıcıda. QtwebKit, bir render motoru olarak platformlu uygulama mimarisi ile birlikte kullanım için limanını sunar.

Tüm WebKit tarayıcılarında yaygın olan nedir

İlk olarak, tüm WebKit tarayıcılarında kullanılan genel işlevlere bakalım:

Komik olduğunu biliyorsun, bu paragrafı yazmak için birkaç girişimde bulundum. Ve her zaman Chrome ekibinin üyeleri beni gördüğünüz gibi düzeltti ...

1. Ve böylece, öncelikle, WebKit, HTML'yi eşit şekilde söküyor. HTML ayrıştırıcısının desteğinin etkin olduğu anda, kromyumun tek bağlantı noktası olması dışında.
2. ... iyi, ancak HTML ayrıştırdıktan sonra, Dom Ağacı eşit olarak tasarlanmıştır. Aslında, Aslında, Shadow Dom sadece Chromium Limanı, yani, DOM-A'nın inşaatı için yer alıyor. Özel öğeler için de.
3. ... Webkit, herkes için eşzamanlı pencere ve belge nesneleri oluşturur. Doğru, özellikleri ve sağladıkları dönüşüm, özellik anahtarlarının kullanımına (özellik bayrakları) bağlı olabilir.
4. ... ayrıştırma css aynı. CSS'nizin yeme ve CSSOM'da dönüştürülmesi oldukça standarttır. Evet, Chrome, yalnızca Apple ve diğer tarayıcıların eski -KHTML ve -Apple -App öneklerini desteklediğinde, yalnızca -Webkit öneklerini desteklemesine rağmen.
5. ... Layout ... Konumlandırma? Tereyağı ile ekmek gibi. Her yerde aynı, değil mi? Peki, zaten! Subpixel düzeni ve doymuş çöplük aritmetik, webkitin bir parçasıdır, ancak limandan bağlantı noktasına kadar farklıdır.
6. Süper.

Bu yüzden zor.

Şimdi, webkit dünyasında ortak olanı özetlemeye çalışalım ...

Her WebKit bağlantı noktasında ortak olan nedir.

• Dom, pencere, belge
  az çok
• Cssom
• İşbirliği CSS, Mülkiyet / Değer
  Üreticilerin Öneklerinde Farklılıklar
• HTML ayrıştırma ve bina DOM
  Aynı şekilde, Web bileşenlerini unutursak.
• Düzen ve konumlandırma
  FlexBox, Floats, Bağlam Şekillendirme Blok ... Tüm Toplam
• Kullanıcı arayüzü araçları ve geliştirici araçları, CHROME devtools webkit denetçisidir.
  Geçen Nisan ayından itibaren Safari, kendi Safari Müfettişini, Webkit'ini kapalı kaynaklarla kullanıyor.
• Memnuniyetsiz, pushstate, dosya API, çoğu SVG, matematik CSS dönüşümleri, Web Ses API, LocalStorage gibi özellikler
  Uygulama farklı olsa da. Her port, yerel masa için kendi depolama sistemini kullanabilir ve Web Ses API için farklı ses API kullanabilir.

Tamamen belli olmaz, bu yüzden bazı farklılıklara bakmaya çalışalım.

Şimdi bu WebKit bağlantı noktalarında yaygın değil:

• Hepsi GPU ile bağlantılı
  - 3D Dönüşüm
  - WebGL.
  - kod çözme videosu
• Ekranda 2D'yi oluşturma
  - Düzgünleştirme teknolojisi
  - SVG ve CSS gradyanlarını oluşturma
• Metin ve transfer oluşturma
• Ağ Teknolojileri (SPDY, PRE-RENDING, WebSOCKE ULAŞIMI)
• Javascript motoru
  - JavascriptCore motoru WebKit deposunda yatıyor. Ancak Webkit'te ve onun için ve V8 için ciltler var.
• Formun unsurlarının oluşturulması
• Etiketlerin video ve ses ve destek kodekleri davranışları
• Kod çözme görüntüleri
• Gezinme Geri / İleri
  - Parça Pushstate ()
• SSL, sıkı ulaşım güvenliği ve ortak anahtar pimleri gibi fonksiyonlar

Onlardan birine bakalım: 2D grafik Bağlantı noktasına bağlı olarak, ekranda görüntülemek için tamamen farklı kütüphaneler kullanıyoruz:

Ya da ayrıntılara girerseniz, yeni eklenen fonksiyon: CSS.Supports (), CSS3 CSS3 Koşullu Özellikleri) dahil olmak üzere Win ve WinCairo hariç tüm bağlantı noktaları için etkinleştirildi.

Şimdi, teknik detaylardayız ... Pedantik olma zamanı. Yukarıdakiler bile tamamen doğru değil. Aslında, webcore, ortak bir bileşendir. WebCore, HTML ve SVG için bir düzen, render ve bir DOM kütüphanesidir ve çoğunlukla insanların webkit dedikleri zaman düşündükleri. Aslında, "WebKit" teknik olarak, webcore ve "bağlantı noktaları" arasında bir bağlama katmanıdır, ancak normal konuşmada bu farkın çoğunlukla önemli olmamasıdır.

Diyagram yardımcı olmalıdır:

Webkit bileşenlerinin çoğu değişebilir (gri ile gösterilir).

Örneğin, JavaScript webkit-a motor, JavaScriptCore, WebKit'teki varsayılan motordur. (Başlangıçta, günden itibaren KJS'ye (KDE'den) dayanmaktadır: WebKit bir KHTML şubesi olarak başladığında. Aynı zamanda, krom bağlantı noktası, V8 motoruna geçer ve benzersiz DOM bağlamaları kullanır.

Yazı tipleri ve metnin işlenmesi platformun çok büyük bir parçasıdır. Webkit'te metin için 2 ayrı yol vardır: hızlı ve karmaşık. Her ikisi de platforma özgü desteği gerektirir (bağlantı noktası tarafında uygulanır), ancak hızlı sadece gliflerin (platform için WebKit önbelleklerinin) nasıl geçiş yapacağını bilmelidir, kompleks platform seviyesine render dizeleri tamamen aktardığında ve basitçe "Bunu çizin) , Lütfen."

"Webkit bir sandviç gibidir. Diğer konularda, krom durumunda, daha çok öyledir. Web teknolojilerinin lezzetli tacoları.
Dmitri Glazkov, Chrome Webkit Hacker. Web bileşenlerinin şampiyonu ve gölge dom.

Şimdi, incelemeyi genişletelim ve birkaç bağlantı noktasına ve birkaç alt sisteme bakalım. Aşağıda beş webkit bağlantı noktası bulunmaktadır, genel bileşenlere rağmen, araç kümesinin her biri için nasıl değiştiğine dikkat edin:

	Chrome (OS X)	Safari (OS X)	Qtwebkit.	Android Tarayıcı.	İos için krom.
Render	Kaymak	Coregraphics	Qtgui.	Android yığını / Kayak	Coregraphics
Ağ oluşturma.	Krom ağ yığını	Cfnetwork.	QTNetwork.	Chromium'un ağ yığını çatal	Krom yığını
Yazı tipleri.	Kayışla Coretext.	Coretext.	Qt Internals.	Android yığını	Coretext.
Javascript.	V8.	Javascriptcore.	JSC (V8 QT'de başka bir yerde kullanılır)	V8.	Javascriptcore (jitting olmadan) *

* IOS için Chrome hakkında dipnot. Muhtemelen bildiğiniz gibi UiwebView kullanır. UIWebView olanaklarına uygun olarak, bu, yalnızca motorun aynı şekilde oluşturulmasını ve ayrıca mobil safari, JavaScriptCore (ve v8) ve tek iş parçacıklı modelini kullanabileceği anlamına gelir. Şimdi, bir ağ, bir ağ, senkronizasyon altyapısı yer imleri, Omnibox, Metrikler ve Arıza Raporları (Crash Reporting) ile çalışmak için bir alt sistem gibi kromlardan ödünç alınır. (Ayrıca, JavaScript, mobil cihazlarda, jitting derleyicisinin yokluğunun minimum bir etkiye sahip olduğu bir darboğazdır.)

Bazı belirli bir tarayıcı için sitelerdeki özellikleri sık sık görüyorum. Örneğin, mülk " -Moz sınır-sol renkler", sol çerçevenin rengini öğesinde gösteren Firefox.. Bunu neden yapmamalısın, yanı sıra sadece sadece durumunu belirteceğim. -Moz, -Ms, -WebKit ve Analoglar Kullanabilirsiniz.

Özellikle tüm bu özelliklerin standartta dahil olmadığını söylemeyeceğim. CSS.Ve bu nedenle geçerli değil. Sonuç olarak, uygulamaları herhangi bir zamanda değiştirilebilir (tarayıcıların geliştiricilerini düşünürseniz, çünkü bu özelliklerin açıklamaları standarttaki açıklamalar CSS. Hayır), sonuç olarak, siteniz çok şımarık olabilir. Özellikle genel kod türlerini bozduklarını açıklamayacağım. Bütün bunlar çok anlaşılabilir.

Bu özelliklerin kullanımının nedenlerini bulmak daha iyidir. Ve buradaki sebepler iki:

1. Crossbrusterity yok. Çapraz tarayıcı probleminin zaten geçmişte olduğunu güvenle söyleyebilirim. Sadece düşük kaliteli düzen problemi kaldı. Tüm modern tarayıcılar her şeyi yeterince ele geçirilir. Minimum yanlış anlamalar (örneğin, opera girişinde sınır yarıçapı) Tüm tarayıcıların herhangi bir sayfa görünmesi iyi olduğunda, göreve alternatif bir yaklaşımla kolayca çözülür " hakov". Ve bu sorun" sol "özelliklerini kullanmak için bir neden değildir.
2. Eski tarayıcılar için destek. Ve özel daha"Sadece eski değil. Eski tartrelerde bu mülkler yoktu ve haberci yoktu. Bunun anlamsızlığını anlamak için, tarayıcıların istatistiklerini görmeye değer. bir yerde 95% Seyirci modern tarayıcılarda. Kalan 5% Keyfini temiz değil. Kodu koymak, gücün iyi bir görüntüsünü alacaksınız. 1% tarayıcılar. Bu nedenle, şimdi daha iyidir veya tarayıcıyı değiştirmeye değecek bir mesajı geri çekin ( jquery. Eklenti var jreject.hangisi yapar), ya da sadece görmezden gelin. Dahası, bunlar arasında kesinlikle şüpheliyim 5% Birçok insan büyük olasılıkla çoğunluk, müşteri hakkında keyfi başlıklar veren botlar var. Ve eski botlar aynı verebilir İe6. Aynı, burada sitelerini eski tarayıcılarda test etmeye devam edenleri içerir.

Bu nedenle kullanın Css3, orada tüm olasılıklar zaten orada ve sadece görülebilir 95% seyirci.

Ancak, özellikleri ne zaman söyleyeceğime söz verdim. -Moz, -Ms, -WebKit ve diğer, kullanılabilir. Yapmak istiyorsanız, biraz farklı bir tasarım için gereklidir. farklı tarayıcılar. Ve özel Çok az"Ve eğer her şeyi tamamen değiştirmeniz gerekiyorsa, daha kolaydır. Javascript. Tarayıcıyı belirleyin ve ayrı bir stil dosyası bağlayın. Açıkçası, böyle bir göreve rastlamadım, ama bu bana bir şekilde haklı çıkarmak için başıma gelen tek şey bu. liysa"Özellikleri CSS..

İOS 11'deki safaride, Apple, tarayıcının sitedeki çeşitli içerikleri daha iyi görüntülemesine ve çalışmalarını hızlandırmasına izin vermesi gereken birkaç yeni özellik ekledi. Onları basitçe etkinleştirin - Ayarlar\u003e Safari\u003e Eklentiler\u003e Deneysel özelliklere gitmeniz gerekir:

Tabii ki, hemen her öğenin sorumlu olduğu hemen anlaşılmaz. Onları daha ayrıntılı olarak analiz edeceğiz:

• Sabit özellikler. - Web sayfalarındaki ayarları farklı ayarlarla değiştirmenize izin vermez. Başka bir deyişle, web sitesini değiştirerek veya indirmesinden sonra özelliklerini değiştirerek önlenir.
• CSS Ekranı: İçindekiler - Öğe alanının oluşumunu yönetmenizi sağlar. Örneğin, onunla, "koltuk değneği" olmadan sitedeki farklı öğeler arasında üniforma girintileri yapabilirsiniz.
• CSS Bahar Animasyonu - Tabii ki, baharda ilgisi yoktur, ancak yalnızca fizik açısından sitelerdeki öğelerin animasyonunu yapmanızı sağlar.
• Link preload - Hayır, yük ön yükleme bağlantıları ile ilişkisi yoktur, bu özellik esas olarak, sözdizimsel analizden sonra önceden yüklenmiş kaynakların önlenmesini önlemek için tasarlanmıştır.
• Legacy Webrtc API'yi Kaldır- Genel olarak, aynı zamanda eski webrtc'i siler (tarayıcı ve noktadan noktaya bağlantı uygulaması arasındaki verileri iletmek için işlevi siler. Örnek - VK uygulamasındaki bağlantıyı açarsınız - WEBRTC teknolojisini kullanarak Safari'nin kopyalarında açılır. ).
• Güvenli Bağlam API - Fonksiyon, bunun özü - Cihazdaki verilerin güvenli bir protokole (HTTPS) iletildiğinden ve davetsiz misafirler tarafından ele geçirilmediğinden emin olun.
• Alt rezilcebirim. - Güvenlik için başka bir özellik. Özü - kaynağın sahibi, örneğin kaynağı cihazın kendisine yüklendikten sonra hesaplanan Hesaplanan şifreleme karmasını gösterebilir.
• Viewport Fit. - Sitelerin, cihaz ekranının fiziksel boyutu için grafik elemanların boyutunu değiştirmelerini sağlar (yani, site bunu destekliyorsa, teoride, öğelerinin kenarları için aranmaz).
• Web animasyonları. - Burada her şey açıktır, animasyonun sitelere dahil edilmesi. Bağlantı kesildiğinde, biraz verimlilik alabilir.
• Webgpu. - Siteler hakkında bilgi işlemek için bir grafik işlemcisi kullanmanızı sağlar. Tarayıcının çalışmalarını doymuş program siteleriyle hızlandırabilir, ancak artan cihazın ısınmasını ve pil ömrünü azaltmasına neden olur.
• Async Çerçeve Kaydırma - Kaydırma, ekran güncelleme frekansından etkilenmez. Görünüşe göre, 120 fps veremedikleri sitelerde gecikmeyi önlemek için 120 Hz ekrandan yeni cihazlar için gereklidir. Eski 60 Hz ekranlarında fark farkedilir.

Hemen rezervasyon yapın - bazılarının kesin açıklaması apple fonksiyonları Sağlamadım ve diğer tarayıcılardan bir açıklama yaptım, bu yüzden özellikle Safari'ye tam olarak yaklaşmayabilir.

Bu makaleyi yazdığınızda, IOS'daki Safari en zor tarayıcıydı. Bölüm 7'de belirtildiği gibi, 2.0 sürümüyle başlayarak, iOS, donanım hızlandırılmış animasyon, geçişler ve hatta 3B efektleri kullanmamıza izin veren büyük (ve garip) bir CSS uzatma grubunu desteklemektedir. Bu uzantıların bazıları, işletim sisteminin sürümüne bağlı olarak, Android ve WebOS tarayıcıları ile de çalışır.

Webkit fonksiyonları

Birçok CSS, parametre olarak işlev görür. Bu işlevler donanım hızlandırılmış webkit genişlemesidir.

IOS'taki degrade işleviyle ilişkili fonksiyonlar resmen desteklenmiyor (Safari Reference Kütüphanesine göre). Bununla birlikte, OS 3.0 ve basit bir arka plan kullandıkları eski cihazlarla çalışırlar.

Tablo 9.7 iPhone için mevcut olan fonksiyonları listeler (başkaları vardır, ancak yalnızca masaüstü safarisinde çalışırlar). Bu özelliklerden bazıları - örneğin, ölçek ve döndürme - Android ve WebOS tarayıcılarında da kullanılabilir.

Masa. 9.7. Tablo CSS Özellikleri Safari'de iOS'ta mevcuttur.

İşlev	Açıklama
kübik-beizer (P1x, P1Y, P2X, P2Y)	Zamanlama işlevi için Bezier eğrisini tanımlar.
matrix (M11, M12, M21, M22, TX, TY)	İki yer değiştirmeyle altı değerin dönüşümsel matrisini belirler.
mATRIX3D (M00, M01, M02, M03, M10, M11, M11, M13, M20, M21, M22, M23, M21, M22, M23, M30, M31, M31, M33)	Dönüşümlü 3D Matris 4 × 4'ü belirleyin.
perspektif (derinlik)	Piramitte Küba Görüntüleme Kartları, Vakfı izleyiciden uzaktır.
döndür (Açı)	Eleman koordinatlarının kökeninin etrafındaki 2D dönüşünü belirler.
rotate3d (x, y, z, açı)	Rotasyon vektör yönü ile 3D döndürmeyi belirler.
rotateks (açı)	Axis X'in etrafında saat yönünde dönmeyi gösterir.
döndürme (açı)	Y ekseni etrafında saat yönünde dönmeyi gösterir.
rotatez (açı)	Z ekseni etrafında saat yönünde dönmeyi gösterir.
Ölçek (scalex,)	2D ölçeklendirme işlemi gerçekleştirir.
skala3d (scalex, scaley, scalez)	3D ölçeklendirme işlemini gerçekleştirir.
sCALEX (değer)	X ekseni boyunca ölçeklendirme
Ölü (değer)	Y ekseni boyunca ölçeklendirme.
sCALYZ (değer)	Z ekseni boyunca ölçeklendirme.
skewx (Açı)	X ekseni boyunca eğimli bir dönüşüm gerçekleştirme
skewy (Açı)	Y ekseni boyunca eğimli bir dönüşüm yapılması.
tercüme (Deltax,)	Vektör 2D ofsetini belirtir.
translate3D (Deltax, Deltay, Deltaz)	3D ofset vektörünü belirtir.
translate (Değer)	X'in etrafındaki kendi ofset.
translatey (değer)	Y ekseni etrafında görüntüler.
translatez (değer)	Z ekseni etrafında görüntüler.
(Renk)	Sıradaki ilk rengi belirler.
renklendirmek)	Sıradaki son rengi belirler.
renkli durdurma (stop_percentage, rengi)	Stop_percentace değerindeki sırayla kullanılacak ara rengi belirtir.
-Webkit-gradyan (doğrusal, start_function, end_function,)	Başlangıç \u200b\u200bnoktası, bitiş noktası ve ek orta noktaları kullanarak doğrusal bir gradyan belirtir. CSS'de herhangi bir görüntü yerine kullanılabilir. İOS 3.0'dan temin edilebilir.
-WebKit gradyanı (radyal, inner_center, innadius, outer_center, outer_radius,)	Color-stop işlevi serisi tarafından belirlenen çiçeklerle merkezi (dahili) nokta ve başka bir nokta (harici) ile radyal bir gradyan belirler. İOS 3.0'dan temin edilebilir.

CSS işlevleri yeni bir CSS özelliği değildir, herhangi bir tarayıcıda mevcuttur. Bu durumda, muhtemelen bazı standart fonksiyonlara aşinasınız - aynı URL (URL_STRING) veya RGBA (kırmızı, yeşil, mavi, alfa) - rengi belirlemek için.

Gradyanlar

İOS 3.0 ile başlayarak Safari, bir görüntü kullandığımız durumlar için bir işlev olarak CSS gradyanının uzantılarını destekler (örneğin, arka plan için). Arka plan için, URL işlevi yerine, doğrusal kullanımını belirlemek için -Webkit-gradyan işlevini kullanabilirsiniz. radyal gradyan Bir arka plan olarak. Bu yöntem minimum kodu kullanmamıza izin verir, başlıklar, kaplar ve hücreler için gerçekten iyi geçmişler yapın. İçin android tarayıcı Tam olarak aynı kodu uygulayın.

Degradenin tanımının bazı örnekleri:

/ * Güneşin sağ üst açıda * etkisi * / gövde (arka plan: -Webkit-degrade (radyal,% 50 -50, 0,% 50 0, 300, (# 676767), (siyah)) siyah ;) Gövde (arka plan: -Webkit-degrade (radyal,% 100 -10, 50,% 70 0, 200, (sarı), (sarı), (beyaz)) #ffc;) / * Basit doğrusal gradyan * / li (arka plan : -Webkit-gradyan (doğrusal,% 0% 0, 0% 100, (# 369), (# 369)) # 369;) / * Basit 3B Efekti * / H1 (arka plan: -Webkit-gradyanı ( Doğrusal,% 0% 0,% 0% 100, (# 369), (# 369), renkli stop (0.5, # 58b));)

Konum değerleri için, ilgi, mutlak değerleri (pikselsiz) veya üst, alt, sağ ve sol sabitler kullanabiliriz. Örneğin, CSS işlevinin ikinci parametresi olarak, sağ üst düzeyi kullanabiliriz,% 0% 0 değil. Şekil 9.1 Bu tür seçeneklerin tarayıcıda nasıl görünebileceğini gösterir.

İncir. 9.1. Yalnızca CSS kullanarak iPhone, iPod touch, iPad ve Android veritabanı için farklı degrade efektleri oluşturabilirsiniz.

Sürüm 6.0 ile başlayan mobil Internet Explorer, filtre stili ile CSS uzantısını kullanarak filtreleri ve geçişleri destekler. Başka efektleri uygulayabilirsiniz.

Yansıma Etkileri

Yansıma Etkileri veya Ayna Etkileri, Web 2.0 projelerinde en sık kullanılan etkilerden biridir. Bu etkiler, görüntüler için de dahil olmak üzere herhangi bir içerik için kullanılabilir. Ancak, küçük ekranlarıyla mobil cihazlar için geliştirdiğimizizi unutmayın ve burada çok fazla yer harcamamalısınız.

Orijinal elemanın yansıması, öğenin içeriğinin kaynak bloğunun düzenini veya boyutunu değiştirmez. Bu, kabın taşması bir parçasıdır.

Safari'deki yansımanın iOS üzerindeki etkisini yapmak için, mülkü aşağıdaki sözdizimiyle kullanın:

WebKit-Box-Reflect: Yön ofseti ;

yön, yukarıda, sol veya sağa olabilir; ofset - mesafe (px veya%) kaynak elemanından, yansıması görünmelidir; ek - Genellikle, görüntüyü yansıtacak bir maske olarak çalışacak bir degrade bir işlevdir. Maskenin görüntüsü belirtilmemişse, normal ayna kullanılacaktır.

Genellikle Web 2.0 sitelerinde kullanılan yansıma etkisinin türü aşağıdaki özellikler:

Webkit-Box-Reflect: 3px -Webkit-gradyanının altında (doğrusal, sol üst, sol alt, (saydam), renk durdurma (0.5, saydam), (beyaz));

Görüntülerin maskeleri

İOS 3.0 ile başlayarak, birçok yıldır web geliştirmede bulunmayan tipik bir tasarımcı işlevine erişiyoruz: görüntü maskeleri. Görüntü maskeleri Herhangi bir doğru veya yanlış kesmeyi uygulamak için kullanabiliriz veya herhangi bir görüntü için herhangi bir görüntü için serin bir görsel efekt (örneğin, bulanık sınır) kullanılır. Maskenin özellikleri arka plan özelliklerine benzer. Maskeyi kullanmak için, bir kısayolun kısaltılmış bir özelliğine ve her parametreyi belirlemek için özel özellikler var.

İsteğe Bağlı Parametrelerle Kısayol Sürümünün Sözdizimi:

WebKit-mask: ek, klip, kökeni, görüntü, tekrar, kompozit, kutu-görüntü;

Tabii ki, tüm özelliklere (vb.) Ayrı erişimimiz var. Birçok fırsat var, ancak genellikle görüntü (alfa veya değil, png veya svg) veya degradenin işlevi görüntü değeri olarak kullanılır. Misal:

Geçiş

Geçiş, CSS değeri özellikleri değiştirdiğinde kendini gösteren otomatik bir animasyondur. Mülkiyet, tarayıcı tarafından animasyon yeteneğine sahip olarak belirlenmelidir (genellikle pozisyon ve boyutun özelliklerini belirtir). Resmi liste Animasyonla çalışabilecek özellikler değildir, ancak genel olarak, pozisyon böyledir: sayısal değerlere sahip herhangi bir özellik veya renk değerleri geçiş kullanılarak hareketli olabilir. Ayrık bir özellik gibi birkaç istisna vardır.

Bu ofsetlerin yalnızca CSS tarafından uygulandığını unutmayın: bir animasyon oluşturmak için JavaScript veya benzeri bir yöntem kullanmıyoruz. Belki size garip görünecek, ancak basit ve aynı zamanda güçlü bir yöntem.

Geçiş çerçevesi, Safari tarayıcıları (iOS 2.0 ile başlayarak) ve Android ve ayrıca, bu cihazlarda, yukarıdaki geçişle çalışırken performans sergiledir.

Geçişi uygulamak için:

1. Geçiş özelliklerini (senkronizasyon işlevinin kullanıldığı süre kullanıldığı süre), hangi bir element (ler) için (ler), hangileri canlandırmak istiyoruz.
2. JavaScript kullanarak animasyon için elemanların özelliklerinin değerlerini değiştirin veya sınıfları uygulayın veya öğeden tamamen çıkarın.
3. Animasyonun çalıştığından emin olun.

Doğru, sadece geliyor mu? Şimdi yapalım.

Animasyon özellikleri

Animasyon, aşağıdaki sözdizimine sahip özelliği kullanarak tanımlanabilir:

WebKit-Geçiş: Mülkiyet Süresi Timing_Function Gecikmesi [, ...];

Tablo 9.8'de belirtilen özel özellikleri de kullanabiliriz.

Masa. 9.8. Webkit için Masa Özellikleri Geçişi

Emlak	Açıklama
	Animasyon için hangi mülkün veya özelliklerin kullanılacağını belirler. Virgül veya sabit değerlerle ayrılmış değerlerin bir listesini kullanabilirsiniz.
	Geçişin süresini belirler. Değer, 0 (animasyon yok) veya saniyeler içinde pozitif bir değer olabilir (S birim olarak kullanılır). Her özellik için farklı zamanlar ayarlamak istiyorsak - -Webkit-Transition-Property özelliği için değerleriyle aynı sırayla bölünmüş değerlerin bir listesini kullanabilirsiniz.
	Hesaplamak için kullanılan işlevi belirler ara değerler Mülkiyetin ilk ve son değerleri arasında. CSS CUBIC-Bezier işlevini veya aşağıdaki sabitlerden herhangi birini kullanabilirsiniz: kolaylık, doğrusal, kolaylık, kolaylık ve kolaylık ve kolaylık (en sık kullanılan).

Aşağıdaki kodu kullanarak, görünüm ve kaybolma animasyonu uygulanır

Solma.

Aynı geçişleri yeniden boyutlandırmak, taşımak, renk değiştirmek ve hatta 3d yer değiştirmeleri için kullanabiliriz.

Geçişin Tamamlanması

Geçişin tamamlanması, diğer DOM olayı ile aynı şekilde JavaScript AddEventListener kullanılarak uygulanabilir. Animasyonun gerçekten bittiğinden emin olduğunuzda, bir sonraki geçişin başlangıcını veya başka bir işlemin başlangıcını başlatabilirsiniz. Bunu yapmak için, WebKitTransitionend etkinliğini yakalamamız gerekiyor. Aşağıdaki kodla yapabiliriz:

Box.addeventlistener ("WebKitTransitionend", işlev (olay) (Uyarı ("bitmiş geçiş");));

Animasyon

Geçiş, iPhone ve Android cihazlarda animasyonu uygulamak için harika bir şeydir ve en kolay yoludur. Animasyon üzerinde ana kare düzeyinde doğru bir kontrole ihtiyacınız olursa, CSS çerçevesini animasyon için kullanabilirsiniz. Dürüst olmak gerekirse, sadece CSS, pratikte ve "işaretsiz" bir dil ile işlenmesi için de zaten olduğunu düşünüyorum. Ama iyi çalışıyor.

WebKit'te, animasyon özelliği kullanılarak yapılır ve sözdizimi aşağıdaki gibi olacaktır:

WebKit-Animation: İsim Süresi Timing_Function Gecikmesi Itation_Count yönü

Zaten, muhtemelen tahmin ederken, Tablo 9.9'da listelenen her olası değer için özel özellikler vardır.

Masa. 9.9. Webkit için animasyon tablosu

Emlak	Açıklama
	Ana kareler tarafından kullanılacak animasyonun adını tanımlar.
	Animasyonun süresini belirler (saniye veya milisaniye).
	Belirli bir özelliğin başlangıç \u200b\u200bve bitiş değerleri arasındaki ara değerleri hesaplamak için kullanılan işlevi belirler. CSS CUBIC-Bezier () işlevini veya aşağıdaki sabitlerden herhangi birini kullanabilirsiniz: kolaylık, doğrusal, kolaylık, kolaylık ve kolaylık ve kolaylık (en sık kullanılan).
	Mülkün değiştirildiği anda başlayan animasyon gecikmesini belirler. Saniye veya milisaniye cinsinden belirlenebilir; Varsayılan değer 0'dır. Negatif bir değer kullanılırsa - Animasyon hemen başlar, ancak bir tür animasyon fragmanı zaten kaybolur ve buna göre atlanır.
	Animasyonun kaç kez tekrar edeceğini belirler. Buradaki varsayılan değer 1, bir değer herhangi bir tamsayı, özel bir sonsuz sabit veya geçerli bir sayı olabilir.
	Animasyonun hangi yönde oynanacağını belirler.

Bu listede anlaşılan, tam olarak animasyonun belirlendiğini tam olarak soruyor olmalısınız? Animasyon nesnesi olarak ne gibi davranıyor? Ve bu soruları cevaplamak için, anahtar personel için WebKit uzantılarına yardımcı olacaktır.

Nesneyi hareket ettirirseniz veya icra ederseniz, yanı sıra, standart CSS özelliklerinin yerine kullanmak daha iyidir - gelişmiş performansı olan bir özellik.

Keyframe Direktifi

Animasyonun nasıl çalışacağını ve tam olarak ne olacağını belirlemek için, bu kuralın adı verilen özel bir CSS tanımlamanız gerekir. Bu kural, -Webkit-Animation adında tanımlanan animasyon adı eşlik eder.

Anahtar kare yönergesinin içinde, seçicilerin veya animasyon gruplarına ne kadar istediğinizi önemli çerçeveler olarak belirtmelisiniz. Seçici, yüzde değeri ve sabitlerden (% 0'a eşdeğer) ve (% 100'e eşdeğer) ile belirlenir. Her bir seçiciye, belirli bir animasyon noktası için tüm özellikleri ve değerleri tanımlarız. -WebKit-Geçiş-zamanlama fonksiyonu ile, her animasyon grubu için senkronizasyonu tanımlayabiliriz.

Animasyonun tamamlanmasından sonra, başlangıç \u200b\u200bdeğerleri geri yüklenir. Animasyonu durdurduktan sonra, öğeler son anahtar çerçevesinin değerlerini kaydetmez.

Örneğin, bir sonraki kodun yardımıyla, kare yörünge boyunca hareket ediyoruz:

Kare yörünge hareketi

Eğer elemanın başlangıcında -Webkit-animasyon özelliklerini belirtirsek, sayfa yüklendiğinde animasyon başlayacaktır. Animasyonu bir sınıf olarak belirlemek ve animasyonu başlatmanız gerektiğinde bu sınıfı öğeye uygulamak daha iyidir.

Öyleyse, animasyonun başlangıcında, sınıfı kullanıyoruz ve animasyonu son karenin daha önce oynatıldığından daha önce durdurmak istiyorsak, -Webkit-Animation-Name özelliğine boş bir değer atamalıyız.

Birden fazla seçenek kullanabilirsiniz: Bir kerede birkaç özelliği değiştiren veya aynı anda farklı animasyonlar (farklı adlarla), her biri yalnızca bir özelliği değiştirecek olan farklı animasyonlar uygulayan bir animasyon.

Animasyon olayları

Ofset geçişlerinde olduğu gibi, WebKitanimationStart, WebKitanimationItation, WebKitanimationend Olayları izleyebiliriz. Başladığınızda, bu olaylar, WebKitanimationEvent nesnesi olarak parametre olarak gönderilir. Ancak olayın anahtar çerçevesindeki her değişiklik için olay yoktur.

Etkinlik nesnesi, değerleri saniyeler içinde belirtilen animationName ve Geçen zamanın özel özelliklerine sahiptir.

dönüşüm

Gördüğümüz son webkit CSS uzantıları grubu - dönüşüm fonksiyonları (dönüşüm). Görüntüleri, tuval veya svg kullanmadan görsel efektler oluşturmak için, bu işlevleri herhangi bir öğeye uygulayabiliriz. Dönüşüm özellikleri Safari, Android ve WebOS tarayıcılarında çalışır.

Bu işlevlerle çalışmak çok basittir: kullanıyoruz CSS özelliği CSS işlevini kullanarak, bu bölümde, döndürme, ölçek veya tercüme3d gibi bu bölümde daha önce tanıştığımız değer olarak kullanılması (yalnızca son safari).

CardFlip şablonunun basitleştirilmiş versiyonu şöyle görünür:

Kodu analiz ederseniz, kartımızı oluşturan iki DIV öğesini göreceğiz - Element.card. Bir DIV "ön" yüzey, diğeri "arka". Her iki yüzey de aynı pozisyonda (mutlak elemanlar olarak) bulunur ve Y ekseni 180 derece olduğunda arka taraf başlar.

Kullanıcı kart kabını tıkladığında (görüntülenen ön veya arka ekranda), biz javascript Yardım YS ekseni etrafındaki bir elemanı 180 derece döndüren CSS sınıfı çevirdi. Ve Voila! Önde (ön) her zaman sadece bir yüzeyi gösterecektir, diğeri otomatik olarak gizlenir. Ve istediğiniz güzel düzgün bir animasyonla gerçekleşmesini sağlayacağım, ne yazık ki, Şekil 9.3'te tam olarak değerlendiremezsiniz.

İncir. 9.3. 3D dönüşüyle, elemanın arka çizgisini görüntülemek için mükemmel 3D efektleri kullanabilirsiniz.