If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

CSSVista è una software per windows (necessita delle librerie NET 2.0) che permette di fare un live editing del css di una pagina web e vederne i risultati contemporaneamente su Internet explorer e Firefox. Una volta installato CSSVista, il programma vi chiederà l’url di una pagina web di cui potrete vedere il render (esattamente come un qualsiasi browser). Il bottone EDIT farà comparire tre aree distinte: l’area di editing dei CSS della pagina e due aree di preview (una per Internet Explorer e una per Firefox). Modificando il codice del CSS, vedrete in tempo reale gli aggiornamenti degli stili nelle altre due finestre.

L’idea è molto carina e funzionale, ma sul mio sistema (windows XP caricato su Parallels di OSX) c’è un problema abbastanza grave in fase di editing del css: il focus sembra passare in automatico dall’area di modifica del CSS agli altri pannelli. Questo spostamento non voluto del focus è decisamente frustrante perchè mi sono spesso trovato a scrivere del codice e a non vederlo correttamente inserito (perchè per esempio l’area attiva era uno dei due pannelli della preview).

Se proprio volete ottenere questa soluzione vi consiglio di utilizzare due estensioni per firefox che vi permettono di modificare al volo un css di una pagina web qualunque (EDIT CSS) e IETAB (solo per windows) che vi permette di aprire dentro un tab di firefox una pagina caricata con il motore di Internet Explorer.

Qualcuno ha avuto maggiore successo con CSSVista?

If you want to find non used CSS styles aka orphan CSS classes or ID or simply styles let’s install “Dust-Me Selectors” FIREFOX extension:

Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors.

It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored in your user preferences, so that as you continue to navigate around a site, selectors will be crossed off the list as they’re encountered.

this is the code to attach a custom css for the iphone browser only (soon my blog will have an iphone css).

<link media=”only screen and (max-device-width: 480px)”
href=”iPhone.css” type=”text/css” rel=”stylesheet” />

Tutti sono capaci di fare un bel bordo intorno ad una immagine con il CSS (vedi qui). E’ però meno diffuso questo effetto abbastanza carino: il bordo interno di 1 pixel.

Volete saperne di più? Vi vedo già in trepidazione… dai seguite il link: Bordo interno con CSS

Per colorare gli scrollbar di una pagina HTML si utilizzano alcune istruzioni CSS (che potete trovare e testare sul sito microsoft).

Il trucchetto è molto semplice:
create una serie di DIV che verranno al caricamento della pagina nascosti con una classe CSS (display:none;)

Associate poi ad una serie di link un paio di azioni javascript molto semplici:
1. nascondere tutti i div
2. visualizzare il div corrispondente al link

Eccovi realizzato un preload molto interessante.

Con questa stessa impostazione potete distribuire una serie di DIV contenti forms attivabili da link sottoforma di tabs (un po’ come succede in Mambo - mettere screenshot).

Ecco un piccolo esempio, come al solito semplificato per essere facilmente comprensibile e riutilizzabile: preview.

Esempio semplice
Esempio avanzato

EDIT:
Ho trovato in rete lo script che viene utilizzato da mambo per la navigazione con i tab:
TABPANE

Un piccolo effetto che sfrutta il dom di javascript con il quale potete far comparire dei nodi XHTML all’interno della pagina e una funzione javascript che permette di “illuminare” il nodo appena creato (questi effetti non sono certamente nuovi, ma li ho abbinati e resi il più semplice possibili a livello di codice per far capire ai meno esperti il funzionamento delle funzioni javascript).

Il risultato: preview.

Codice javascript utilizzato (vedere il codice della preview per maggiori informazioni):

1. var i = 0;
2. function scrivi(elemento, id, contenuto)
3. {
4. var nuovo = document.createElement(elemento);
5. nuovo.setAttribute('id', i);
6. nuovo.appendChild(document.createTextNode(contenuto));
7. document.getElementById(id).appendChild(nuovo);
8. fade(i);
9. i = i + 1;
10. }
11.  
12. var hex = 0;
13.  
14. function fade(i){
15. if(hex < 255)
16. {
17. hex = hex + 11;
18. document.getElementById(i).style.background = "rgb(255,"+hex+","+hex+")";
19. setTimeout("fade("+i+")", 30);
20. }
21. else hex=0;
22. }

Vi sembra una buona interfaccia?

Un piccolo bug: se cliccate velocemente la funzione fade() fa un pochino di confusione. Qualcuno sa come evitare tutto ciò?

Preview da inserire.. Mannaggia al poco tempo che ho a disposizione…

1. <!-- STYLE -->
2. * { font-size: x-small; background-color: #ccc; color: black; }
3.  
4. html>body .navcontainer li a { width: auto; }
5.  
6. .one li a { border-left: 6px solid red !important; }
7. .one li a:hover { border-left: 6px solid white !important; }
8.  
9. .two li a { border-left: 6px solid yellow !important; }
10. .two li a:hover { border-left: 6px solid white !important; }
11.  
12. .three li a { border-left: 6px solid blue !important; }
13. .three li a:hover { border-left: 6px solid white !important; }
14.  
15. .navcontainer {
16. color: #333333;
17. font-family: Verdana;
18. margin-bottom: 1em;
19. padding: 0 0 0 0;
20. width: 12em;
21. }
22.  
23. .navcontainer {
24. width: 200px;
25. }
26.  
27. .navcontainer li {
28. border-bottom: 3px solid #ccc;
29. margin: 0;
30. }
31.  
32. .navcontainer li a {
33. border-left: 6px solid #8EAD45;
34. display: block;
35. padding: 0px;
36. padding-left: 6px;
37. text-decoration: none;
38. width: 100%;
39. }
40.  
41. .navcontainer li a:hover {
42. background-color: #7C97AC;
43. border-left: 10px solid #8EAD45;
44. color: #FFFFFF;
45. }
46.  
47. .navcontainer ul {
48. border: none;
49. list-style: none;
50. margin: 0;
51. margin-top: 10px;
52. padding: 0;
53. }
54.  
55. <!-- BODY -->
56. <div class="navcontainer one">
57. <ul>
58. <li><a href="#">Item 1</a></li>
59. <li><a href="#">Item four</a></li>
60. <li><a href="#">Item five</a></li>
61. </ul>
62. </div>
63.  
64. <div class="navcontainer two">
65. <ul>
66. <li><a href="#">Item 2</a></li>
67. <li><a href="#">Item two</a></li>
68. <li><a href="#">Item five</a></li>
69. </ul>
70. </div>
71.  
72. <div class="navcontainer three">
73. <ul>
74. <li><a href="#">Item 3</a></li>
75. <li><a href="#">Item two</a></li>
76. <li><a href="#">Item five</a></li>
77. </ul>
78. </div>


.cleaner
{
clear: both;
padding-right: 0px;
padding-left: 0px;
font-size: 1px;
padding-bottom: 0px;
margin: 0px;
overflow: hidden;
padding-top: 0px;
height: 1px;
}