Gott och Blandat #4

peter / 18.okt.2008

Den här gången handlar det om CSS och HTML.

CSS3 Media Queries

För ett tag sedan skulle jag använda ett stylesheet för mobila enheter genom media="handheld". Det fungerade såklart inte alls i Opera Mini 4.1, men jag tänkte inte så mycket mer på det utan löste det på annat sätt. Nu har jag tagit reda på orsaken, och den kallas CSS3 Media Queries.

Med dessa “queries” kan man definiera css-regler som appliceras baserat på vad enheten man använder sig av klarar av. I mitt exempel så har jag en regel som bara appliceras på enheter med en skärm som är mindre än 481 pixlar bred. (Av en ren händelse så har iPhone en 480px bred skärm)

1
2
3
4
5
6
7
8
9
10
11
12

@media screen and (max-width: 480px) {
  * {
    position: static !important;
    background-image: none !important;
    margin-left: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

 /* Resten av reglerna för mobila enheter */

}

Resultat

Opera Mini c7.se/contact
Opera Mini Demo

Opera rekomenderar dock att man även i fortsättningen använder sig av ett stylesheet med media="handheld" för de enheter som ännu inte stödjer CSS3 Media Queries.

Typografi

Enligt mig en av världens bästa webbdesigners, Dan Cederholm har skrivit en liten post om att välja den bästa tillgängliga ampersanden.

Kortfattat så går det hela ut på att lägga till en class=”amp” runt alla &-tecken.



Gott <span class="amp">&amp;</span> Blandat
 
1
2
3
4

span.amp {
  font-family: Baskerville, Palatino, Constantia, serif;
  font-style: italic;
}

Före

Gott & Blandat

Efter

Gott & Blandat

(Ingen skillnad? Då har din RSS-läsare troligtvis strippat bort style taggen)

För att automatisera detta kan man använda sig av Typogrify (Django) eller MarkDown+SmartyPants (Finns till de flesta publiceringssystem).

Mikroformat

Mikroformat är standarder, baserade ovanpå HTML eller XHTML. Mikroformat är en utökad semantik, som åstadkommer i (X)HTML möjligheten att märka upp information, som annars man hade behövt en annan teknik till, såsom RDF eller någon annan tillämpning av XML. Mikroformat är alltså inte en utvidgning av befintlig (X)HTML, som HTML5, utan man använder endast befintliga taggar och attribut. [Wikipedia]

Ett mikroformat jag använder mig av är hCard vilket är en 1:1 representation av vCard.

hCard

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="vcard" id="hcard-Peter-Hellberg">
  <img class="photo" alt="" src="http://c7.se/images/peter_small.jpg"/>
  <div class="fn n">
    <span class="given-name">Peter</span>
    <span class="family-name">Hellberg</span>
  </div>
  <div>
    <span class="role">System Developer</span>,
    <a href="http://c7.se/" class="org url">Code7 Interactive</a>
  <div>
  <h3>Email <span class="amp">&</span> Jabber</h3>
  <p>
    <a href="mailto:peter@c7.se" class="email jabber">peter@c7.se</a>
  </p>
  <h3>Address</h3>
  <div class="adr">
    <div class="street-address">Mosstenabacken 1</div>
    <div>
      <span class="postal-code">124 32</span>
      <span class="locality">Bandhagen</span> 
    </div>
    <span class="region">Stockholm</span>,
    <span class="country-name">Sweden</span>
  </div>
</div>

Med hjälp av biblioteket mofo kan jag nu hämta följande data:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

>> peter = hCard.find 'http://c7.se/contact'
=> #<HCard:0x1141e90 
 @role="System Developer", 
 @url="http://c7.se/", 
 @base_url="http://c7.se", 
 @org="Code7 Interactive", 
 @n=#<OpenStruct family_name="Hellberg", given_name="Peter">, 
 @properties=["org", "email", "fn", "url", "photo", "n", "role", "adr"],  
 @photo="http://c7.se/images/peter_small.jpg", 
 @adr=#<Adr:0x1167438 
   @country_name="Sweden", 
   @base_url="http://c7.se", 
   @region="Stockholm", 
   @properties=[
     "street_address", 
     "locality", "region", 
     "country_name", 
     "postal_code"
   ], 
   @locality="Bandhagen", 
   @postal_code="124 32", 
   @street_address="Mosstenabacken 1">, 
 @fn="Peter Hellberg", 
 @email="peter@c7.se">

, , , , , , ,

Prenumerera

Håll dig uppdaterad om vad jag gör på Athega genom rss!

Upp

Temat heter micro och är gjort av seaofclouds.
Det drivs med Mephisto under Ruby on Rails