źródło: http://getfirebug.com/wiki/index.php/File:Flaming-firebug-logo-with-text.png przez Johnjbarton

Główne zmiany

• Konsola i linia poleceń
• HTML
• CSS
• JavaScript

źródło: http://www.softwareishard.com/blog/firebug/firebug-16-command-line-available-on-all-panels/

Konsola i linia poleceń

Przycisk aktywujący linię komend został wyciągnięty przed panele, dzięki czemu jest teraz dostępna z każdego panelu. Ułatwi to znacznie pracę podczas debugowania kodu JavaScript, gdy wykonywanie kodu zostanie zatrzymane przez błąd. Możliwe wtedy stanie się sprawdzenie wartości zmiennej, czy szybkie wykonanie jakiegoś kodu js bez przełączania się do innego panelu.

Dodano filtrowanie wiadomości pojawiających się w konsoli według ich rodzaju (błędy, ostrzeżenia, informacyjne)

źródło: http://www.softwareishard.com/blog/firebug/tabular-logs-in-firebug/

Nowa komenda console.table(), która powoduje wyświetlenie w konsoli zmiennej tablicowej jako zwykłej tablicy – z kolumnami i wierszami. Definicja metody jest następująca: console.table(object[, columns]);. Kod powodujący wyświetlenie tabelki ze zrzutu ekranu:

1
2
3
4
5

var table1 = new Array(5);
for (var i=0; i<table1.length; i++){
    table1[i] = [i+1, i+2, i+3, i+4, i+5, i+6, i+7];
}
console.table(table1);

Zmian wprowadzonych do konsoli jest dużo więcej , są to m.in.:

• Grupowanie wyników konsoli w rozwijalne bloki przy użyciu

  console.groupCollapsed("This is my table");
  console.table(table1);
  console.groupEnd();

• Sortowanie wyników tabeli wyświetlonej w konsoli
• Wyświetlanie zmiennych złożonych typów. Teraz Firebug lepiej radzi sobie z wyświetlaniem obiektów, elementów DOM itd
• Wyświetlanie danych tabelo-podobnych. Firebug radzi sobie nie tylko z tablicami, ale także z listą obiektów, które reprezentują tą samą strukturę:

  function Person(firstName, lastName, age) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.age = age;
  }
   
  var family = {};
  family.mother = new Person("Susan", "Doyle", 32);
  family.father = new Person("John", "Doyle", 33);
  family.daughter = new Person("Lily", "Doyle", 5);
  family.son = new Person("Mike", "Doyle", 8);
   
  console.table(family);

  W wyniku otrzymujemy:

  źródło: http://www.softwareishard.com/blog/firebug/tabular-logs-in-firebug/

  Czytaj dalej tutaj (rozwija treść wpisu)
  Czytaj dalej na blogu autora...

  

  Zwiń
  Czytaj na blogu autora...

Przeglądając nieprzebrane zasoby Internetu, można czasem natrafić na prawdziwą perłę. Taką właśnie perłą jest zestaw ikon, które powstały tylko i wyłącznie przy pomocy CSS. Co ciekawe, kod HTML jest niezwykle prosty, a cała sztuczka polega na wykorzystaniu pseudoelementów. Całość prezentuje się imponująco.

Niestety muszę ostudzić wasz zapał. O ile wszystkie normalne przeglądarki (Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+) poprawnie wyświetlają powyższe ikonki, tak IE (nawet w wersji 9) sobie z nimi nie radzi.

Zachęcam do obejrzenia dema oraz odwiedzenia bloga autora, gdzie znajdziecie przykładowy kod.

Ten wpis jest dostępny wyłącznie w języku: English.

Related posts

• Info (0)
• The Small Calendar (0)
• The Small Calendar – Windows gadżet (3)
• The Small Calendar – jQuery + PHP w praktyce (5)
• (English) Earn Fame and Fortune in the Nettuts/Screenr Screencast Competition (1)

Tym razem pokażę wam, w jaki sposób wykorzystując sam CSS, wyclearować float’owane elementy bez dodawania zbędnych div’ów czy co tam jeszcze ktoś sobie wymyśli. Jedziemy

Przypuśćmy, że posiadamy następujący kod html:

<div style="float:left">Blok float'owany</div>
<div>Tego już nie chcemy opływać.</div>

Normalnie w takim przypadku większość programistów wstawiłaby po pierwszym bloku następny, ze stylem clear:both. Istnieje jednak łatwiejsza metoda.

W tym rozwiązaniu skorzystamy skorzystamy z pseudoklasy :after, żeby automatycznie wstawić za element z atrybutem float niewidoczną treść która nam wszystko ładnie wyclearuje.

Kod wygląda następująco:

<style type="text/css">

  .clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* hack dla IE pod Mac'iem */

</style>
<!--[if IE]>  /* Hack dla IE */
<style type="text/css">
  .clear {
    zoom: 1;
    display: block;
  }</style>
<![endif]-->

Teraz wystarczy do naszego div'a z ustawionym float dodać klasę .clear a powyższy kod doda za nim niewidzialną kropkę, która całkowicie rozwiąże problem zbędnych znaczników.
Jedynym minusem jest wątpliwa obsługa tego kodu pod starszymi przeglądarkami, nawet pomimo zastosowanych przeze mnie hacków. No ale jeśli cały czas będziemy się oglądać do tyłu to nie pójdziemy na przód, takie życie  

Hacki CSS dla przeglądarki kojarzą się głównie z IE6. Obok komentarzy warunkowych, najpopularniejszym sposobem na zastosowanie innych wartości atrybutów CSS w IE6, jest sztuczka polegająca na dodaniu przed selektorem * html, np

/* wszystkie przeglądarki */
#menu {
	margin-top: 10px;
}

/* tylko IE6 */
* html #menu {
	margin-top: 5px;
	font-size: 10px;
}

Niestety na rynek trafiła przeglądarka IE7, w której nie działa hack * html. Na szczęście mamy do dyspozycji inną kombinację selektorów, która działa tylko w IE7 – *:first-child+html. Ostatecznie CSS dla IE6 oraz IE7 będzie wyglądał następująco:

/* wszystkie przeglądarki */
#menu {
	margin-top: 10px;
}

/* tylko IE6 */
* html #menu {
	margin-top: 5px;
	font-size: 10px;
}

/* tylko IE7 */
*:first-child+html #sub-menu {
	margin-top: 8px;
}

Każda osoba, która chociaż raz musiała wycinać średnio skomplikowany layout, stawała przed dylematem "jak zaokrąglić te przeklęte rogi". Są dwie możliwości - obrazkowa oraz stylowa. W przypadku metody obrazkowej wszystkie zaokrąglenia są zapisywane jako grafika, która następnie jest osadzana w nadmiarowych elementach HTML. Podejście to jest przede wszystkim niezawodne. Każda przeglądarka identycznie wyświetli zamieszczone grafiki. Schody zaczynają się w momencie, gdy zachodzi potrzeba przebudowania wyglądu strony. Zmiana promienia, czy nawet czegoś tak błahego jak kolor obramowania, staje się w tym momencie udręką. Do pracy, w najlepszym wypadku, należy zaprząc jakiś program graficzny, w najgorszym - całego grafika ;), przez co prosta zmiana staje się wyzwaniem na dobrych kilka godzin. Drugie podejście polega na skorzystaniu z dobrodziejstw postępu, czyli z CSS. Kilkanaście znaków w pliku ze stylami może zdziałać cuda.

border-radius: 10px;

Niestety taki zapis zadziała tylko w Operze oraz Google Chrome. Nie oszukujmy się. Ilość osób, która zobaczy, że nasza strona posiada zaokrąglone rogi, jest znikoma. Co z resztą przeglądarek? Ich autorzy wprowadzili prefixy (np znany z Firefoxa -moz). Dzięki temu można wprowadzić "krągłości" w pozostałych przeglądarkach.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Niestety powyższe rozwiązanie nadal nie spowoduje, że większość odwiedzających naszą stronę nie zobaczy jej tak, jakbyśmy tego chcieli. Pozostaje problem z przeglądarką Internet Explorer. Dopiero wydana niedawno wersja beta oznaczona numerem 9 radzi sobie z czymś tak banalnym. Nie zmienia to jednak faktu, że większość użytkowników ma pecha i korzysta z IE6, 7 lub 8.

I tutaj dochodzimy wreszcie do meritum dzisiejszego wpisu. Niestety nie ma rozwiązania tylko "stylowego". Musimy skorzystać z pomocy Javascript i VML. Nie martwcie się jednak. Nie będziemy nic pisać, skorzystamy po prostu z gotowej biblioteki. Mowa tutaj o DD_roundies, której autorem jest ta sama osoba, która stworzyła jedyny działający fix na obrazki png w przeglądarce IE6. Jedyne dwie czynności jakie mamy do wykonania, to dołączenie pliku z biblioteką do strony oraz wywołanie metody addRule na obiekcie DD_roundies. Metoda przyjmuje trzy parametry. Pierwszym jest selektor CSS, wskazujący na interesujący nas element (wymagany), drugim wartość zaokrąglenia (wymagana). Ostatnim (opcjonalnym) parametrem jest informacja, czy zaokrąglenie ma zostać wykonane tylko w przeglądarce IE (domyślne ustawienie).

Cały kod wygląda następująco:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
		#some-id {
			/* przykładowe wartości */
			width: 200px;
			height: 200px;
			border: 1px solid #cccccc;
			
			
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
		</style>
		<script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
		<script type="text/javascript">
		window.onload = function() {
			DD_roundies.addRule("#some-id", "10px");
		}
		</script>
	</head>
    <body>
		<div id="some-id"></div>
	</body>
</html>

Jeśli chcecie zobaczyć na żywo jak to wygląda, zapraszam do obejrzenia dema.

Na koniec dodam jedynie, że nie jest to "ultimate solution" i na pewno znajdą się sytuacje, w których znacznie lepiej będzie zastosować obrazki. Niemniej we wszystkich moich ostatnich próbach (wprawdzie nieśmiałych i na niewielką skalę), skrypt ten spisał się na medal.

Sieć została ogarnięta szałem najnowszej, piątej wersji języka HTML. Jak to zazwyczaj bywa słabo z jej obsługą radzi sobie Internet Explorer. We wszystkich wydanych wersjach pojawia się problem z parsowaniem elementów języka HTML 5, a co za tym idzie nie ma domyślnie możliwości ich poprawnego ostylowania. Podobny problem w przeszłości występował w Firefoksie 2.

Zarys problemu

Załóżmy więc, że tworzymy nowy projekt i jesteśmy na etapie dodawania nagłówka oraz stopki dokumentu.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Obsługa HTML 5 z CSS</title>
    <style>
    body { text-align: center; margin: 0; padding: 0; font-family: Tahoma, Verdana, Arial; font-size: 11px; }
    header { font-style: italic; width: 770px; height: 70px; padding: 15px; margin: 5px auto; background-color: #FC0; text-align: left; }
    footer { font-weight: bold; clear: both; width: 770px; height: 15px; padding: 15px; margin: 5px auto; background-color: #FC0; text-align: left; }
    </style>
</head>
<body>
    <header>Nagłówek</header>
    <footer>Stopka</footer>
</body>
</html>

Nadaliśmy powyżej kilka atrybutów stylów pozycjonujących elementy oraz nadających im odpowiedni wygląd. Po przetestowaniu w Internet Explorerze i alternatywnych przeglądarkach zobaczymy jednak różne wyniki.

Wynik w Firefoksie 4.

Wynik w Internet Explorerze 8.

Internet Explorer – rozwiązanie pierwsze

Aby pozbyć się tego problemu należy do sekcji head wstawić:

<script>
document.createElement('header');
document.createElement('footer');
</script>

Internet Explorer – rozwiązanie drugie

Dla każdej wersji Internet Explorera można także dodać do dokumentu HTML (w sekcję head) zewnętrzny kod JavaScript, dzięki któremu osiągniemy wyżej opisany skutek.

<!--[if IE lt 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Firefox 2

Niespełna jeden procent internautów nadal używa drugiej odsłony popularnego lisa. Zarówno on, jak i wszystkie przeglądarki oparte na silniku Gecko pre 1.9b5 (np. Camino 1.x) posiadają błąd parsowania dzięki któremu w przypadku otwarcia nowego znacznika każdy nieznany, wcześniej otwarty zostanie automatycznie zamknięty.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...