Zawartość
- Układ
- Clearfix
- Rozmiar pudełka
- Wielokolumnowe
- Obliczenia
- Styl
- Przezroczystość
- Filtry
- Wymiana obrazu
- Responsywne wideo
- Funkcjonalność
- Łatwy wybór elementów
- Tworzenie nowych tablic
- Wyczyść dokumenty i obiekty okien
- Lubiłem to? Przeczytaj to!
Ten artykuł pojawił się po raz pierwszy w numerze 234 magazynu .net - najlepiej sprzedającego się magazynu na świecie dla projektantów i programistów stron internetowych.
Technika w swej istocie jest sposobem na wykonanie zadania, a będąc programistami i projektantami frontendu mamy wiele zadań. To powiedziawszy, często zapominamy, jak bardzo ten krajobraz się zmienił. W latach 2002-2010 nasza społeczność była zgniła z powodu nadmiaru kodu i zasobów, co utrudniało wydajność i łatwość utrzymania. Aby temu zaradzić, stworzyliśmy mnóstwo wskazówek, sztuczek i trików, które nazwaliśmy „techniką”. Nadal realizowaliśmy zadania, ale nie w najbardziej efektywny sposób.
Tworząc 360, w ciągu ostatnich kilku lat pojawiły się lepsze standardy i implementacje standardów, umożliwiając nam jako społeczności rozwijanie nowszych i bardziej zaawansowanych „technik”. Ten nowy krajobraz jest uważany za „nowoczesną sieć”.
Wraz z zastojem i zagmatwaniem „Web 2.0” stanie się również „nowoczesna sieć”. Daj temu czas. To powiedziawszy, na razie możemy używać tego terminu i nadużywać go, o ile istnieje powszechne zrozumienie tego, co on reprezentuje.
W 2010 roku pojawiła się specyfikacja HTML5, zapewniająca zupełnie nowe, częściowo ustandaryzowane środowisko internetowe. Przeglądarki takie jak Opera, Firefox, Chrome i Safari przyjęły tę nową falę i pchnęły swoje zespoły programistów do nowych granic implementacji standardów i eksploracji API. Aby dać ci wyobrażenie o tym, jak „wbudowane” są te przeglądarki, zapoznaj się z wizualizacjami www.html5readiness.com dotyczącymi zmiany obsługi HTML5.
Nie martw się brakiem wsparcia w Internet Explorerze. Możemy temu zaradzić dzięki Google Chrome Frame. Odkąd Google wprowadził go w 2010 roku, stał się głównym mechanizmem wsparcia dla Internet Explorera. Wszystkie wersje IE mogą być kierowane za pomocą Chrome Frame, która zachęca nowego użytkownika do pobrania wtyczki, która renderuje wybrane witryny za pomocą lekkiej wersji Chrome w IE. Aby zaimplementować wtyczkę Chrome Frame, dodajemy następujący metatag> w tagu head> naszej witryny.
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
Stąd możemy zachęcić użytkowników IE do pobrania wtyczki, jeśli nie została jeszcze zainstalowana, przy użyciu JavaScript:
script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
skrypt>
window.onload = function () {
CFInstall.check ({
tryb: "nakładka",
miejsce docelowe: „http://www.twojadomena.com”
});
};
/ skrypt>
miejsce docelowe można ustawić tak, aby po zainstalowaniu wtyczki przekierowywał użytkownika do określonego łącza. Słowo ostrzeżenia: chociaż Chrome Frame daje nam metodę programowania wyłącznie dla prawdziwie nowoczesnych przeglądarek, nie możemy zapominać, że użytkownik ma możliwość nie pobierania wtyczki, jeśli nie chce. Jeśli tak się nie stanie, a musisz zapewnić wsparcie dla jednej lub kilku różnych wersji IE, będziesz musiał poświęcić więcej czasu na sprawdzenie, co możesz, a czego nie możesz zapewnić, korzystając ze swoich doświadczeń, w różnych przeglądarkach.
Dzięki temu kodowi, który zapewnia znacznie bardziej wyrównane szanse, na których można rozwijać się na nowoczesnym stosie internetowym, możemy swobodnie poruszać się naprzód. Być może pamiętasz, że musiałeś utworzyć kilka hacków specyficznych dla przeglądarki, aby Twoja witryna miała odpowiednią strukturę w różnych przeglądarkach, tworząc niezliczoną liczbę pustych elementów do wykorzystania w podzielonych na plasterki obrazach, a nawet pisać zbyt rozwlekły lub nadmiarowy kod JavaScript, aby uzyskać najprostsza funkcjonalność do pracy. Wszystkie te bóle są w pewnym sensie tymi samymi problemami, o które martwimy się dzisiaj. Nadal walczymy o większą kontrolę i lepsze narzędzia do walki z układem, stylem i funkcjonalnością, ale na poziomie dojrzałym.
Układ
Clearfix
Pływający element został wprowadzony z powrotem w CSS 2.1, ale nigdy nie okazał się kompletnym rozwiązaniem, na jakie mieliśmy nadzieję. Jednym z największych problemów było zachowanie wymiarów elementu nadrzędnego, gdy element podrzędny był pływający. Aby rozwiązać ten problem, stworzono technikę clearfix.
Weź następujący kod HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Ta technika została napisana przez Nicolasa Gallaghera:
.clearfix: przed,
.clearfix: after {
zawartość: " ";
wyświetlacz: stolik;
}
.clearfix: after {
oba czyste;
}
.clearfix {
* powiększenie: 1;
}
Jeśli używasz HTML5Boilerplate do uruchamiania projektów, będziesz już mieć tę wersję techniki clearfix.
Rozmiar pudełka
Przez lata programiści debatowali, który model pudełkowy ma większy sens. Tryb Quirks vs Standards tak naprawdę oznaczał: „czy wymiary elementu powinny się zmienić po ustawieniu, kiedy zastosowano obramowanie i wypełnienie, czy nie”.
Obecnie powszechnie uznaje się, że bardziej sensowne jest, aby obramowania i wypełnienie zabrały dostępną przestrzeń w elemencie, a nie dodały do szerokości lub wysokości elementu. Debata stała się nieistotna dzięki powszechnemu wdrożeniu rozmiarów pudełek. Przeglądarka będzie pobierać wskazówki od Ciebie zamiast odwrotnie.
Spopularyzowana przez Chrisa Coyiera i Paula Irisha, wszechstronna technika może zostać zaimplementowana w następujący sposób:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-size: border-box;
}
Używanie selektora * w CSS było przedmiotem debaty ze względu na potencjalne spadki wydajności. Tego rodzaju twierdzenia są niepoważne, jeśli nie optymalizujesz wszystkich innych aspektów swojej witryny / aplikacji. Użycie border-box spowoduje, że przeglądarka doda dopełnienie i obramowanie wewnątrz dostępnego zestawu przestrzeni. „Tryb standardów” można wykorzystać, ustawiając rozmiar pola na zawartość pola.
Wielokolumnowe
Sieć została w dużej mierze zainspirowana formą pisaną i czcionką. Niestety utknęliśmy na etapie pergaminu. Niektóre z tych problemów dochodzą do głowy dzięki długo oczekiwanym specyfikacjom Paged-Media i CSS Regions. To powiedziawszy, pierwsze kroki w kierunku bardziej przypominających magazyny układów zostały podjęte, gdy przeglądarki zaczęły wdrażać wielokolumnowe CSS. Kod generujący ten efekt jest raczej prosty:
p {
-webkit-liczba-kolumn: 2;
-moz-liczba-kolumn: 2;
liczba kolumn: 2;
}
Więcej informacji na temat specyfikacji wielokolumnowej CSS3, a także kodu rezerwowego JavaScript, którego można używać w dowolnej przeglądarce bez wsparcia, można znaleźć na blogu A List Apart.
Obliczenia
Obliczanie wymiarów może być trudne. W dawnych czasach nie mieliśmy możliwości wykonywania jakichkolwiek obliczeń jednostkowych, nie mówiąc już o obliczeniach jednostek mieszanych. Wszystko się zmieniło dzięki Calc. Tworzenie efektu wypełnienia, który nie wpływa na szerokość początkowych elementów ani nie wykorzystuje czegoś takiego jak rozmiar pola: border-box; było do niedawna możliwe tylko poprzez dodanie dodatkowych elementów zawierających.
.padded {
margines: 0 auto;
pozycja: względna;
szerokość: -webkit-calc (100% - (20px * 2));
szerokość: -moz-calc (100% - (20px * 2));
szerokość: calc (100% - (20px * 2));
}
Calc () dba o prawidłowe obliczenie szerokości w oparciu o szerokość rodzica .padded i minus zdefiniowane wypełnienie 20px. Pomnożyłem to przez 2 dla każdej strony mojego elementu, wyśrodkowując element przy użyciu względnego pozycjonowania oraz lewego i prawego marginesu automatycznego.
Styl
Przezroczystość
Uzyskanie odpowiedniego stylu elementu zawsze zależało od rodzaju narzędzi, które mieliśmy do dyspozycji w CSS. Przejrzystość jest jednym z pierwszych wariantów wsparcia, z którymi można się spotkać na początku do połowy 2000 roku.
Wraz z pojawieniem się HTML5 i bardziej skoncentrowanymi wysiłkami związanymi ze standardami, przeglądarki mają standardową implementację właściwości opacity i udostępniają obsługę kanału alfa zgodnie z nową specyfikacją modułu koloru. Obejmuje to wytyczne RGBA i HSLA.
a {
kolor: rgba (0,255,0,0,5);
tło: rgba (0,0,255,0,05);
obramowanie: rgba (255,0,0,0,5);
}
Możesz używać kolorów RGBA lub HSLA wszędzie tam, gdzie znajdziesz wartości HEX. Istnieje również rozszerzona lista zabawnych kolorów ze zdefiniowanymi nazwami, które możesz sprawdzić bezpośrednio w specyfikacji. Przydają się one, gdy chcesz stworzyć dynamiczne połączenie między elementami.
Filtry
Filtry CSS są niezwykle ekscytujące. Możliwość dynamicznej zmiany wyglądu i stylu elementów na stronie bez potrzeby stosowania wtyczek innych firm jest niesamowita i pomoże znacznie skrócić czas spędzany w programie Photoshop.
img src = "market.webp">
img {
-webkit-filter: skala szarości (100%);
}
Filtry CSS są obecnie obsługiwane tylko w przeglądarkach WebKit, więc ich użycie powinno mieć charakter addytywny, niezależny. Przeczytaj więcej tutaj.
Wymiana obrazu
Zamiana tekstu na obrazy istnieje już od dawna. Niestety, najnowsze i najbardziej wyrafinowane techniki zastępowania obrazu nadal mają wady, jeśli chodzi o dostępność. Ale ostatnio wyszły na jaw dwa, które są niezwykle sprytne i wyjątkowe w swoich własnych prawach. Pierwszy został napisany przez Scotta Kellmana:
h1 class = 'hide-text'> Logo mojej witryny / h1>
.hide-text {
wcięcie tekstu: 100%;
spacja: nowrap;
przepełnienie: ukryte;
}
Drugi został napisany przez Nicolasa Gallaghera:
.hide-text {
czcionka: 0/0 a;
text-shadow: brak;
kolor: przezroczysty;
}
Responsywne wideo
Prawidłowe skalowanie multimediów w responsywnym środowisku może być trudne. Ponieważ coraz więcej stron internetowych respektuje projektowanie adaptacyjne, ważne jest, aby właściwie obsługiwać wymiary i proporcje elementów.
Osadzone wideo jest jednym z najtrudniejszych typów mediów, z którymi trzeba się zmagać, ze względu na sposób, w jaki usługi stron trzecich obsługują treści. Typowe umieszczanie w serwisie YouTube wygląda mniej więcej tak:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Element iframe zawiera wtedy obiekt Flash lub element osadzony. Używanie czegoś takiego jak iframe {maxwidth: 100%; } nie zadziała, ponieważ zagnieżdżone elementy nie zmieniają odpowiednio rozmiaru po zmianie szerokości. Więc musimy zrobić trochę oszustwa.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Umieszczenie elementu iframe w innym elemencie da nam kontrolę, której potrzebujemy, aby dodać odpowiednią responsywną funkcjonalność do wideo.
.video {
pozycja: względna;
wyściółka na dole: 56,25%;
wysokość: 0;
przepełnienie: ukryte;
}
iframe wideo,
obiekt wideo,
.video embed {
pozycja: bezwzględna;
góra: 0;
po lewej: 0;
szerokość: 100%;
wysokość: 100%;
}
Ustawianie dolnego dopełnienia opakowania .video: 56,25%; to magia tej metody. Użycie dopełnienia oznacza, że użyty procent będzie oparty na szerokości rodzica; „56,25%” utworzy współczynnik proporcji 16: 9. Jeśli chcesz, wykonaj obliczenia samodzielnie. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (to jest nasz procent).
Funkcjonalność
Łatwy wybór elementów
Wraz z popularnością wielu bibliotek JavaScript (na przykład jQuery), komisja ECMAScript i standardy W3C zwróciły uwagę na jeden z podstawowych elementów funkcjonalności, których twórcom brakowało natywnie - dobry wybór elementów. Metody takie jak getElementByID () i getElementByClassName () były szybkie, ale nie tak elastyczne i niezawodne, jak silniki selektorów pochodzące od społeczności programistów; querySelectorAll () był sposobem ciała standardów naśladowania części tej elastyczności w natywnej metodzie selektora.
var items = document.querySelectorAll („# header .item”);
Do zapytania querySelectorAll () można przekazać wiele i mieszanych selektorów. Przeczytaj więcej na ten temat.
Tworzenie nowych tablic
Iterowanie po tablicy to coś, czego pisanie staje się męczące. Pisanie i przepisywanie pętli for () nie jest zabawne. W JS w wersji 1.6 wylądowała metoda map () zapewniająca obsługę łatwego iterowania i tworzenia nowej tablicy na podstawie innej.
var people = [„Heather”, „James”, „Kari”, „Kevin”];
var welcome = people.map (function (name) {
return „Cześć” + imię + „!”;
});
Uruchamiając ten kod, gdybyśmy skorzystali z console.log (wita), zobaczylibyśmy powitania to nowa tablica [„Cześć Heather!”, „Cześć James!”, „Cześć Kari!”, „Cześć Kevin!” ].
Wyczyść dokumenty i obiekty okien
Biblioteki JavaScript innych firm są podatne na mieszanie się z natywnymi obiektami dokumentów i okien. Może to stanowić problem dla bibliotek innych firm i programisty, który je obsługuje. Jako każda ze stron upewnij się, że pracujesz z czystą wersją obu obiektów, tworząc ich nową instancję. Najlepszym sposobem na to jest utworzenie elementu iframe, wstawienie go do DOM i przechowywanie nowych instancji tych obiektów.
var iframe = document.createElement („iframe”);
iframe.style.display = "none";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Chociaż wprowadzono duże ulepszenia w stosie internetowym, nadal niezwykle ważne jest uzupełnianie i udoskonalanie naszego pakietu technologicznego, aby sprostać wyzwaniom związanym z układem, stylem i funkcjonalnością naszego projektu. Aby utrzymać dobry ekosystem wzrostu, musimy zachęcać organy normalizacyjne i dostawców przeglądarek do kontynuowania postępów w zakresie nowych specyfikacji i innowacyjnych implementacji funkcji, jednocześnie dzieląc się naszą wiedzą z innymi programistami i projektantami. Więcej spostrzeżeń, mniej hacków.
Darcy Clarke jest wielokrotnie nagradzanym programistą, współzałożycielem firmy tematycznej WordPress Themify i agregatora codziennych ofert DealPage oraz członkiem zespołu jQuery. Pracuje w Polar Mobile jako starszy programista UX.
Lubiłem to? Przeczytaj to!
- Jak zbudować aplikację
- Pobierz najlepsze darmowe czcionki
- Darmowe pędzle Photoshopa, które musi mieć każda kreacja
- Samouczki programu Illustrator: niesamowite pomysły do wypróbowania już dziś!
- Świetne przykłady sztuki doodle
- Świetny wybór samouczków Wordpress
- Najlepsze darmowe czcionki internetowe dla projektantów
- Pobierz darmowe tekstury: w wysokiej rozdzielczości i gotowe do użycia już teraz
