www.archive-de-2014.com » DE » M » MADDESIGNS

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".

    Archived pages: 254 . Archive date: 2014-10.

  • Title: Sass & Compass Introduction, maddesigns (Sven Wolfermann) #mcdd12
    Descriptive info: Modern Frontend Development with Sass Compass.. Introduction.. tweet: @maddesigns #sass.. Sven Wolfermann | maddesigns.. Who is the guy?.. (34).. Freelancer for modern frontend.. development (HTML5, CSS3, jQuery).. from Berlin.. CSS3 Adventskalender 2010/2011.. wrotes articles for T3N, PHP-Magazin.. and Webstandards-Magazin.. (new: Screengui.. de).. Certified TYPO3 Integrator.. Twitter:.. @maddesigns.. Web:.. http://maddesigns.. de.. CSS is awesome.. CSS needs an upgrade.. CSS3 ist not enough.. Recommended knowledge for this tutorial.. CSS (for sure).. HTML5 Boilerplate.. Modernizr.. No PHP Knowledge nessessary.. *.. can contain tracks of Ruby.. Short intro to HTML5 Boilerplate.. http://html5boilerplate.. com/.. Short intro to Modernizr.. http://modernizr.. http://sass-lang.. What is Sass?.. Sass means syntactically awesome style sheets.. is a preprocessor.. Similar preprocessors: LESS, Stylus (needs JS, i.. e.. a node.. js server.. Installing Sass.. In order to install and run Sass, you need to have Ruby installed on your system.. Mac OSX.. Easy! Ruby is built in :).. Linux.. if not installed, use the package manager.. $ sudo apt-get install ruby1.. 9.. 1-full.. Installing Sass (Ruby first).. on Windows?.. use.. http://rubyinstaller.. org/.. $ sudo gem install sass.. install beta version (3.. 2.. ):.. $ sudo gem install sass --pre.. already installed Sass?.. check with.. $ sass --version.. Create your first Sass (SCSS) file.. create a sass folder.. create.. styles.. scss.. open in your favourite editor.. *.. Sublime Text 2.. Wait? What is the SCSS-thingy?.. Sass or SCSS?.. Sass has two syntaxes.. The new main syntax is known as “SCSS” (for “Sassy CSS”).. SCSS files use the extension.. The second, older syntax is known as the indented syntax (or just “Sass”).. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks.. Files in the indented syntax use the extension.. sass.. section { margin: 1em 0; header { background-color: lightpink; } }.. section margin: 1em 0 header background-color: lightpink.. SCSS is easier for beginners, Sass is more strict and clean.. Sven Wolfermann, 2011.. First steps.. wrap the HTML elements in the H5BP template.. div class="container"> header> h1>header /h1> /header> div role="main" class="content"> /div> footer> p>footer /p> /footer> /div>.. First steps.. crating first styles in style.. html, body { height: 100%; }.. container { min-height: 100%; max-width: 1200px; width: auto; margin: 0 auto; } h1 { border-bottom: 2px solid #69A550; // green color: #FF8700; // orange margin: 0 0 0.. 5em; }.. Uuh.. looks like CSS, isn't it?.. compile to CSS - watch changes.. open terminal.. watch folder.. $ sass --watch sass:css.. watch file.. $ sass --watch sass/style.. scss:css/style.. css.. compiled to /css/style.. css.. container { min-height: 100%; max-width: 1200px; width: auto; margin: 0 auto; } h1 { border-bottom: 2px solid #69A550; color: #FF8700; margin: 0 0 0.. no real difference, but first step done.. Variables.. working with variables.. h1 { border-bottom: 2px solid #69A550; // green color: #FF8700; // orange margin: 0 0 0.. 5em; }.. change to global variables.. $color-main: #69A550; $color-alt: #FF8700; h1 { border-bottom: 2px solid $color-main; color: $color-alt; margin: 0 0 0.. variables can be colors, sizes, percentage,.. $page_max_width: 1200px; $padding: 20px;.. container { min-height: 100%; max-width: $page_max_width; width: auto; margin: 0 auto; padding: 0 $padding; }.. Variables can be include dashes or underscores.. they're compatible to each other and are the same!.. $variable-name: value;.. foo { property: $variable_name; }.. $variable-name.. and.. $variable_name.. both refer to the same variable.. Calculating with Sass.. container { max-width: $page_max_width - $padding * 2; padding: 0 $padding;.. }.. container { max-width: 1160px; /* 1200px - 20px * 2 */ padding: 0 20px;.. }.. Variables in queries.. doesn't work in Sass 3.. 1 – fixed in Sass 3.. $break-small: 320px; $break-large: 1200px;.. profile-pic { float: left; width: 250px; @media screen and (max-width: $break-small) { width: 100px; float: none; } @media screen and (min-width: $break-large) { float: right; } }.. Responsive Web Design in Sass: Using Media Queries in Sass 3.. Variables in queries, using @content.. $break-small: 320px; $break-large: 1024px; @mixin respond-to($media) { @if $media == handhelds { @media only screen and (max-width: $break-small) { @content; } } @else if $media == medium-screens { @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; } } @else if $media == wide-screens { @media only screen and (min-width: $break-large) { @content; } } }.. profile-pic { float: left; width: 250px; @include respond-to(handhelds) { width: 100% ;} @include respond-to(medium-screens) { width: 125px; } @include respond-to(wide-screens) { float: none; } }.. profile-pic { float: left; width: 250px; } @media only screen and (max-width: 320px) {.. profile-pic { width: 100%; } } @media only screen and (min-width: 321px) and (max-width: 1023px) {.. profile-pic { width: 125px; } } @media only screen and (min-width: 1024px) {.. profile-pic { float: none; } }.. $width: 10px; $double_width: $width * 2; /* 20px */ $half_width: $width / 2; /* 5px */ $width_plus_2: $width + 2; /* 12px */ $width_minus_2: $width - 2; /* 8px */.. spaces are important.. Division - a special case.. font: 18px / 1.. 45em; // 18px/1.. 45em font: (20px / 5); // 4px font: 20px / 5 + 1; // 5px font: $base / 5; // 4px $size: 20px / 5; // 4px.. in the end you come to such solutions.. h1,.. h1 { font: px2em($base-fontsize * 2) / #{$base-lineheight} $font-main; }.. Sample will be explained later.. Nesting.. writing long selectors is time consuming.. short selectors are better in general.. nav {float: right;} nav li {float: left;} nav li a {color: #666;} nav li a:hover {color: #333;} nav li.. current {font-weight: bold;}.. nav { float: right; li { float: left; a { color: #666; &:hover { color: #333; } } &.. current { font-weight: bold; } } }.. identation with SCSS makes no difference in CSS output.. nav {float: right; li {float: left; a {color: #666; &:hover { color: #333;} } &.. current { font-weight: bold;} }}.. but sure it looks better if intended.. CSS rules aren't the only things that can be nested in Sass.. Properties can, too.. foo { border: { style: solid; width: 1px 2px 3px 4px; color: red green blue black; } }.. HOW DEEP CAN I GO?.. Sass nesting != HTML nesting.. be careful with nesting!.. you can run into performance issues with long selectors.. Bad Nesting.. div.. container { div.. content { div.. articles { & > div.. post { div.. title { h1 { a { } } } div.. content { ul { li {.. } } } } } } }.. content div.. container {.. } div.. container div.. articles {.. articles > div.. post {.. post div.. title {.. title h1 {.. title h1 a {.. content {.. content ul {.. content ul li {.. Combining Selectors.. div { color: black.. foo { color: black } // descendant combinator +.. foo { color: black } // adjacent sibling combinator >.. foo { color: black } // child combinator ~.. foo { color: black } // general sibling combinator &.. foo { color: black } // Sass' parent selector &.. bar { color: black } &:hover { color: black } }.. div { color: black; } div.. foo { color: black; } div +.. foo { color: black; } div >.. foo { color: black; } div ~.. foo { color: black; } div.. foo { color: black; } div.. bar { color: black; } div:hover { color: black; }.. Parent Selector - the ampersand.. the (ampersand) has a placeholder function for the parental selector.. div {.. foo { color: black } &.. foo { color: black } }.. are compiled to the same.. div.. foo { color: black }.. div { &.. foo { color: black } }.. foo { color: black; }.. div { &:hover { color: black } }.. div:hover { color: black; }.. div  ...   $base_font_size: 16) { @return $font_size / $base_font_size + em }.. new in Sass 3.. Placeholder Selectors: %foo.. // This ruleset won't be rendered on its own.. #context a%extreme { color: blue; font-weight: bold; font-size: 2em; }.. placeholder selectors can be extended, just like classes and IDs.. The extended selectors will be generated, but the base placeholder selector will not.. notice { @extend %extreme; }.. #context a.. notice { color: blue; font-weight: bold; font-size: 2em; }.. #{} interpolation is now allowed in all plain CSS directives (such as.. @font-face.. @keyframes.. , and of course.. @media.. ).. Sass 3.. 2 adds the.. ie-hex-str.. function which returns a hex string for a color suitable for use with IE filters.. min.. max.. functions, which return the minimum and maximum of several values.. There is now much more comprehensive support for using @extend alongside CSS3 selector combinators (+, ~, and >).. These combinators will now be merged as much as possible.. Fun with Sass functions.. http://sassymothereffingtextshadow.. http://compass-style.. Compass.. Compass is a Framework, that extends SASS.. It brings a lot of CSS3 mixins and useful CSS stuff.. http://sonspring.. com/journal/sass-for-designers.. Installation.. $ sudo gem install compass.. or simple use the new.. Mac Installer.. GUIs.. Livereload ($9.. 99) – my favourite.. Fire.. App ($14).. app ($10).. CodeKit ($20).. Scout App (free).. Create a new project.. $ compass create myproject>.. Compass creates following:.. config.. rb sass ┗ ie.. scss ┗ print.. scss ┗ screen.. scss stylesheets ┗ ie.. css ┗ screen.. Configuration.. The compass configuration file is a ruby file, which means that we can do some clever things if we want to.. But don’t let it frighten you; it’s really quite easy to set up your project.. Standard configuration: config.. rb.. http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts".. configuration.. my favourite config.. # config.. rb http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "img" javascripts_dir = "js" fonts_dir = "fonts" #environment = :production relative_assets = true line_comments = false output_style = :compact #output_style = (environment == :production) ? :compressed : :expanded.. configuration reference.. Production Stylesheets.. $ compass compile -e production --force.. Create a separate configuration file for production.. $ cp config.. rb prod_config.. rb #.. edit prod_config.. rb to suit your needs.. $ compass compile -c prod_config.. rb --force.. Importing Compass in Sass files.. @import "compass".. importing only few parts.. @import "compass/css3".. @import "compass/utilities".. @import "compass/typography/links".. don't care, will not blow your stylesheet unless you use a mixin from Compass.. Using Compass Snippets.. Sample: Compass Horizontal List.. ul.. nav { @include horizontal-list-container; > li { @include horizontal-list-item; } }.. nav { margin: 0; padding: 0; border: 0; overflow: hidden; *zoom: 1; } ul.. nav > li { list-style-image: none; list-style-type: none; margin-left: 0; white-space: nowrap; display: inline; float: left; padding-left: 4px; padding-right: 4px; } ul.. nav > li:first-child, ul.. nav > li.. first { padding-left: 0; } ul.. nav > li:last-child { padding-right: 0; } ul.. last { padding-right: 0; }.. CSS3 Mixins.. most CSS3 features are implemented with browser vendor prefixes.. think about linear-gradient – hard to know the right syntax.. gradient { background-color: yellow; /* Fallback Color */ background: -webkit-gradient(linear,left top,left bottom,from(yellow),to(blue)); background: -webkit-linear-gradient(top, yellow 0%, blue 100%); background: -moz-linear-gradient(top, yellow 0%, blue 100%); background: -ms-linear-gradient(top, yellow 0%, blue 100%); background: -o-linear-gradient(top, yellow 0%, blue 100%); /* current W3C standard, not implemented implemented with prefix in FF10, Opera 11.. 60 */ background: linear-gradient(to bottom, yellow 0%, blue 100%); }.. easy with Compass.. gradient { @include background(linear-gradient(top, yellow, blue)); }.. full browser support.. gradient { $experimental-support-for-svg: true; @include background(linear-gradient(top, yellow, blue)); // for older IEs.. oldie & { background-color: yellow; @include filter-gradient(yellow, blue, vertical); } }.. gradient { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0i.. '); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff00), color-stop(100%, #0000ff)); background: -webkit-linear-gradient(top, #ffff00, #0000ff); background: -moz-linear-gradient(top, #ffff00, #0000ff); background: -o-linear-gradient(top, #ffff00, #0000ff); background: -ms-linear-gradient(top, #ffff00, #0000ff); background: linear-gradient(top, #ffff00, #0000ff); }.. oldie.. gradient { background-color: yellow; *zoom: 1; filter: progid:DXImageTransform.. Microsoft.. gradient(gradientType=0, startColorstr='#FFFFFF00', endColorstr='#FF0000FF'); }.. Global variables.. // _base.. scss $experimental-support-for-svg: true; $support-for-original-webkit-gradients: false; $legacy-support-for-ie6: false; $legacy-support-for-ie7: false;.. more configuration:.. Compass Configuration.. Helper Functions.. header { background: image-url("header-bg.. png"); h1 { height: image-height("logo.. png"); width: image-width("logo.. png"); background: transparent inline-image("logo.. png") no-repeat; } }.. header { background: url('.. /img/header-bg.. png'); } header h1 { height: 185px; width: 140px; background: transparent url('data:image/png;base64,/9j/4AAQSkZJRgABAgAAZABkAAD.. ') no-repeat; }.. Compass Helper Functions.. really useful helper functions.. // reads the width of the image image-width($image) // reads the height of the image image-height($image) // converts the image to an inline image inline-image($image, $mime-type).. aside { #{headings(2,4)} { text-transform: uppercase; } }.. aside h2, aside h3, aside h4 { text-transform: uppercase; }.. Sprites.. the best feature of Compass.. Automatic spriting.. public/images/icon/new.. png public/images/icon/edit.. png public/images/icon/save.. png public/images/icon/delete.. png.. @import "icon/*.. png"; @include all-icon-sprites;.. Generates sprite images of given folder.. Compass watches image folders for changes.. icon-sprite,.. icon-delete,.. icon-edit,.. icon-new,.. icon-save { background: url('/images/icon-s34fe0604ab.. png') no-repeat; }.. icon-delete { background-position: 0 0; }.. icon-edit { background-position: 0 -32px; }.. icon-new { background-position: 0 -64px; }.. icon-save { background-position: 0 -96px; }.. Magic Selectors.. img/player/play.. png img/player/play_active.. png img/player/play_hover.. @import "player/*.. png"; @include all-player-sprites;.. button-play { @include player-sprite(play); }.. player-sprite,.. player-play,.. player-play_pause { background: url('/images/player-sc690ad66a4.. player-play { background-position: 0 -110px; }.. player-play:hover,.. player-play.. play_hover,.. play-hover { background-position: 0 0; }.. player-play:active,.. play_active,.. play-active { background-position: 0 -55px; }.. Sprite-Layout Configuration.. $player-layout: horizontal;.. $player-layout: diagonal;.. $player-layout: smart;.. $player-spacing: 100px // add more space between sprite images @import "player/*.. png" @include all-player-sprites;.. button-play { @include player-sprite(play); height: player-sprite-height(play); width: player-sprite-width(play); }.. Styling file downloads.. img/fileicons/jpg.. png img/fileicons/doc.. png img/fileicons/zip.. png img/fileicons/pdf.. png img/fileicons/xml.. png img/fileicons/txt.. @import "fileicons/*.. png"; @include all-fileicons-sprites; $icons: sprite-map("fileicons/*.. png"); // point to sprite-map @each $sprite-name in sprite-names($icons) { a[href $=".. #{$sprite-name}"] { padding-left: 25px; } }.. Sprites configuration variables.. $ map>-spacing - space in px around the sprites $ map>-repeat - whether to repeat the sprite bg $ map>-position - the x position of the sprite on the map $ map>-sprite-base-class - the base class (default ".. map>-sprite") $ map>-clean-up - whether to delete old image maps $ map>- sprite>-spacing - spacing, for individual sprites $ map>- sprite>-repeat - repeat, for individual sprites $ map>- sprite>-position - position, for individual sprites.. Example:.. $sprites-header_bg-repeat: repeat-x;.. addtolibrary { +sprite-background-position($tracks-sprites, track_addtolibrary, 5px, 50%) }.. Retina Sprites.. $sprites: sprite-map("sprites/*.. png"); $sprites-retina: sprite-map("sprites-retina/*.. png"); @mixin sprite-background($name) { background-image: sprite-url($sprites); background-position: sprite-position($sprites, $name); background-repeat: no-repeat; display: block; height: image-height(sprite-file($sprites, $name)); width: image-width(sprite-file($sprites, $name)); @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) { @if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) { $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2); background-position: 0 $ypos; } // Hard coded width of the normal sprite image.. There must be a smarter way to do this.. @include background-size(444px auto); background-image: sprite-url($sprites-retina); } } // Usage.. mail-icon { @include sprite-background(mail); }.. https://gist.. github.. com/2140082.. useful additions: disable asset caching.. rename generated Sprite image.. rb asset_cache_buster :none # Rename the generated sprite images on_sprite_saved do |filename| if File.. exists?(filename) FileUtils.. mv filename, filename.. gsub(%r{-s[a-z0-9]{10}\.. png$}, '.. png') end end # Replace in stylesheets generated references to sprites # by their counterparts without the hash uniqueness.. on_stylesheet_saved do |filename| if File.. exists?(filename) css = File.. read filename File.. open(filename, 'w+') do |f| f.. Compass Plugins.. Github List of Compass Plugins.. loading Compass plugins.. add to the config.. rb.. require 'rgbapng' require 'compass-bootstrap'.. RGBAPNG Plugin.. https://github.. com/aaronrussell/compass-rgbapng.. $ sudo gem install compass-rgbapng.. @import "rgbapng";.. box { @include rgba-background(rgba(0,0,0,0.. 75)); }.. box { background: url('/images/rgbapng/000000bf.. png?1282127952'); background: rgba(0, 0, 0, 0.. 75); }.. Compass plugins.. Responsive Grid Plugin –.. Susy.. $ sudo gem install compass-susy-plugin $ compass create myproject -r susy -u susy.. page { @include container; @include susy-grid-background; }.. Thanks for your attention!.. HTML5 slideshow by Google.. de/sass-compass-introduction/..

    Original link path: /sass-compass-introduction/
    Open archive

  • Title: Responsive TYPO3, maddesigns (Sven Wolfermann) #T3AK12
    Descriptive info: Responsive TYPO3.. Responsive Web Design.. Sven Wolfermann | maddesigns.. TYPO3 Akademie 2012 München, 10.. 02.. 2012.. Twittern: @maddesigns #t3ak12 #rt3.. Wer ist die Flitzpiepe da überhaupt?.. Freelancer für moderne Webentwicklung.. (HTML5, CSS3, jQuery) aus Berlin.. schreibt Artikel für das T3N- und.. Webstandards-Magazin.. Diese Website ist optimiert für Internet Explorer 4.. X, 5.. 0 und Netscape ab 4.. 5X, bei einer Auflösung von 800x600, mittlerem Schriftgrad und 16,7 Mio.. Farben.. Das Web.. Webseiten waren grundsätzlich schon immer flexibel und haben sich an die Bildschirmauflösung angepasst.. Bild gesehen bei.. Jens Grochtdreis.. – Original von.. Brad Frost.. ist nicht starr.. Printdesigner haben es dazu gemacht.. #rant.. Barrierefreiheit gibt flexible Inhalte (Schriftgrößen) vor.. moderne Browser können die komplette Website zoomen – die Notwendigkeit von einer flexiblen Website scheint überflüssig.. mit festen Pixelwerte lässt sich leichter, schneller demzufolge günstiger entwickeln.. aber neue mobile internetfähige Geräte geben uns neue Aufgaben auf.. Top 10 Bildschirmauflösungen 2009–2012.. Quelle:.. http://gs.. statcounter.. 2011 wurden erstmals mehr Smartphones als Desktop-PCs verkauft.. Canalys, 03.. Smartphone Markt (unvollständig).. Tablet Markt.. (natürlich auch unvollständig).. Ein Viertel der Deutschen surft via Smartphone im Internet.. Stern.. de, 07.. “Mobile Web”.. Herzlich Willkommen!.. Verschiedene Screens, aber die Website passt sich an!.. Are Media Queries the answer to the Fold?.. A List Apart Artikel von Ethan Marcotte.. Responsive Design bezeichnet eine Praxis im Webdesign, bei der der grafische Aufbau von Webseiten dynamisch und unter Berücksichtigung der Anforderungen des betrachtenden Gerätes erfolgt … eine Webseite wird somit auf einem großen Display anders dargestellt als auf einem Tablet-PC oder Smartphone.. Wikipedia.. Auf Umgebung und Endgeräte reagieren.. Auf Umgebung reagieren - mobiler Kontext.. Wo nutzen Menschen ihre mobilen Geräte?.. 84%.. zuhause.. 80%.. während sonstigen Ausfallzeiten im Laufe des Tages.. 76%.. beim Anstehen oder beim Warten auf Terminen.. 69%.. beim Einkaufen.. 64%.. bei der Arbeit.. 62%.. beim Fernsehen.. 47%.. beim Pendeln zur Arbeit.. Smartphone Owners: A Ready and Willing Audience.. Auf Endgeräte reagieren.. Bildschirme wurden in den Jahren immer größer, Smartphone-Screens vielfältiger.. moderne Browser können Geräteeigenschaften auslesen.. das Website-Layout kann daran angepasst werden.. “Unsere Website muss in allen Browsern gleich aussehen.. ”.. Flash.. Flexible Spaltenraster, die auf Prozentwerte basieren.. Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an.. CSS3 um Gerätegröße abzufragen und Inhalte anzupassen.. Quelle Bild:.. http://macrojuice.. CSS3 Media-Queries.. moderne Browser-Technik.. CSS3 Media-Queries.. /* Smartphones (portrait and landscape) */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* CSS Styles */ } /* Tablets (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* CSS Styles */ } /* Desktops and Laptops */ @media only screen and (min-width : 1024px) { /* CSS Styles */ }.. CSS3 @media-Queries.. geht auch bei extern eingebundenen Dateien.. link rel="stylesheet" href="smartphone.. css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">.. für höhere Auflösung optimiertes CSS - iPhone4.. link rel="stylesheet" href="iphone4.. css" media="only screen and (-webkit-min-device-pixel-ratio : 1.. 5), only screen and (min-device-pixel-ratio : 1.. 5)">.. Layout für kleine Bildschirmgrößen linearisieren.. @media screen and (max-width: 600px) { header, footer,.. main { float: none; width: auto; } }.. keine statische Medieninhalte.. img, embed, object, video { max-width: 100%; }.. CSS3 Media-Queries » Browser-Support.. Chrome.. seit Version 4.. 0.. (aktuell Version 17).. Firefox.. seit  ...   div> | /div> caption.. wrap = figcaption> | /figcaption> caption.. required = 1 } } }.. Responsive Images.. Adaptive Bilder.. Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen.. Große Bilder werden zwar verkleinert dargestellt, laden aber unnötige Datenmengen.. img> Tag ist nicht dafür ausgelegt.. Polyfills müssen her.. Lösungsansätze für Bildgrößenproblematik.. CSS3-Ansatz von Nicolas Gallagher.. http://nicolasgallagher.. com/responsive-images-using-css3/.. img src="image.. jpg" alt="" data-src-600px="image-600px.. jpg">.. com/filamentgroup/Responsive-Images.. img src="small.. jpg?full=large.. Responsive Media - Blog Post von @drublic.. Die aktuell beste Lösung meiner Meinung nach ist die noscript>-Lösung mit HTML5.. data.. -Attributen.. noscript data-large="Koala.. jpg" data-small="Koala-small.. jpg" data-alt="Koala"> img src="Koala.. jpg" alt="Koala" /> /noscript>.. monoliitti.. com/images/.. Responsive Images mit Typoscript.. 20 { maxW = 960 maxW.. override.. data > maxWInText = {$styles.. content.. imgtext.. maxWInText} maxWInText.. data = register:maxImageWidthInText imageStdWrap.. dataWrap.. cObject = COA imageStdWrap.. cObject { 1 = TEXT 1.. value = div class="csc-textpic-imagewrap"> noscript 10 = IMG_RESOURCE 10 { file.. import.. data = TSFE:lastImageInfo|origFile file.. maxW = 480 file.. data = {$styles.. maxW} stdWrap.. noTrimWrap = | data-small="|" | } 20 = IMG_RESOURCE 20 { file.. maxW = {$styles.. maxW} file.. data = register:maxImageWidth stdWrap.. noTrimWrap = | data-large="|" | } 1000 = TEXT 1000.. value = >| /noscript> /div> } }.. jQuery #FTW.. $('noscript[data-large][data-small]').. each(function(){ var src = screen.. width >= 500 ? $(this).. data('large') : $(this).. data('small'); $('<img src="' + src + '" alt="' + $(this).. data('alt') + '" />').. insertAfter($(this)); });.. TYPO3 Extension.. Ext:rtp_imgquery.. Baut auf den noscript>-Ansatz auf.. Kann schon vor dem ready-Event die korrekte Bildgrösse bestimmen.. Braucht keine externe Bibliothek (kein jQuery).. Ist von keiner anderen Extension (inkl.. CSS Styled Content) abhängig.. Kann als TypoScript Konfiguration, Smarty Plugin oder Fluid ViewHelper eingesetzt werden und ist im normalen Text/Images Content Element integriert.. Interessiert sich nicht für den resize-Event.. com/rtp-ch/rtp_imgquery.. Extension installieren, statisches TypoScript einbinden.. 10 = IMAGE 10.. file = fileadmin/images/myimage.. jpg 10.. file.. width = 800 10.. breakpoint = 1200 10.. breakpoints = 600:500, 400:280, 320:160.. Fluid ViewHelper.. {namespace responsive=Tx_RtpImgquery_ViewHelpers} responsive:image src="fileadmin/images/myimage.. jpg" alt="alt text" breakpoint="900" breakpoints="600:500, 400:280, 320:160" />.. für Bilder können in jedem Inhaltselement Breakpoints gesetzt werden.. Responsive Web Design ist mehr als das Design für Geräte anzupassen – es ist die Anpassung an die Bedürfnisse des Nutzers.. neue Herausforderungen für Designer, Konzepter, Berater und natürlich auch für Kunden.. touchfähige Geräte werden anders bedient (Maus/Finger).. Größe von Schrift und Buttons muss angepasst werden.. mobil ist anderes Surfverhalten als zuhause/auf Arbeit.. Navigationskonzepte müssen anders geplant werden.. “mobile first” als Start-Konzept.. neue Herausforderungen.. Performance – Ladegeschwindigkeit auf mobilen Geräten ist wesentlich langsamer.. performance-hungrig: Social-Media-Buttons – am Smartphone vielleicht unnötig?.. es gibt nicht DIE Lösung wann man Layoutumbrüche setzt – abhänging von Projekt-Zielen, Zielgruppe, Inhalt, Design und der bisherigen Website-Statistiken.. Vorteile.. Nutzerfreundlich.. niedriger Entwicklungsaufwand, weil die gleiche HTML-Struktur als Basis dient.. leicht auf bestehende (kleinere-mittlere) Seiten anzuwenden.. sofort auf allen Geräten verfügbar.. (App-Store).. Nachteile.. Alle Resource werden geladen (Bilder), auch wenn sie z.. B am Smartphone nicht angezeigt werden.. um so umfangreicher die Website, desto komplizierter kann es werden (Stichwort: Werbebanner).. speziell entwickelte Apps können im Einzelfall besser sein.. Fragen?.. “Ich hab genau zugehört, aber was ist nochmal … ?”.. technische Lösungen sind vorhanden - Designer, Konzepter und Berater müssen an das Responsive Web herangeführt werden.. Danke für die Aufmerksamkeit!.. de/responsive-typo3/..

    Original link path: /responsive-typo3/
    Open archive

  • Title: CSS3 & Responsive Web - Sven Wolfermann (@maddesigns) - Vortrag vom #MMT28
    Descriptive info: CSS3 Responsive Web.. Twittern: @maddesigns #mmt28 #css3.. Multimediatreff 28 - Köln, 03.. 12.. 2011.. , 34 - Freelancer aus Berlin.. CSS3 Adventskalender.. schreibt für das Webstandards-Magazin.. CSS3 Logo.. Welche CSS3-Eigenschaften werden heute schon umfassend unterstützt?.. Content-Generierung mit Pseudo-Elementen.. Webfonts.. linear-gradient.. runde Ecken! YEAH!!!!111elf.. border-radius: 20px;.. border-radius: 10px 40px;.. border-radius: 10px 40px 40px 10px;.. border-radius: 10px / 40px;.. border-radius » Box vergrößern.. border-radius: 50px;.. border-radius: 50%;.. border-radius » browserspezifische Präfixe.. -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px;.. border-radius: 4px;.. border-radius: 4px;.. verstehen alle modernen Browser und der IE9.. border-radius » Browser-Support.. na klar.. ab Version 4, etwas buggy in 3.. 6.. Opera.. ab Version 11.. 5.. Safari.. mit.. border.. etwas buggy bei Prozentwerten.. Internet Explorer.. ab Version 9.. ”Aber mein IE7 zeigt keine runden Ecken!“.. muss er auch nicht!.. Es gibt keinen guten (einfachen) Weg dem IE6-8 runde Ecken beizubringen.. Die bessere Alternative ist runde Ecken weg zu lassen!.. Der Informationsgehalt eines Textes wird durch die runden Ecken nicht besser.. Browsermarkt in Europa.. StatCounter Global Stats - Browser Version Market Share.. Schatten - Whoohoo!.. box-shadow » browserspezifische Präfixe?.. -webkit-box-shadow: 2px 2px 5px black; -moz-box-shadow: 2px 2px 5px black;.. /* FF 3.. 6 */ box-shadow: 2px 2px 5px black;.. -webkit-box-shadow.. ist für iPhone Android noch nötig.. -webkit-box-shadow: 2px 2px 5px black;.. box-shadow: 2px 2px 5px black;.. -webkit-box-shadow: inset 2px 2px….. box-shadow: inset 2px 2px 5px black;.. box-shadow » anderer Offset / Spread-Wert.. box-shadow: 0px 0px 10px black;.. box-shadow: 0px 0px 10px 10px black;.. box-shadow: 0px 15px 10px -10px black;.. box-shadow: inset 0px 15px 10px -10px….. multiple Schatten.. box-shadow: 0px 10px 5px red, 10px 0px 5px blue, 0px -10px 5px green, -10px 0px 5px purple;.. mehrere Schatten mit Komma trennen.. multiple border mit box-shadow.. box-shadow: 0 0 0 5px red, 0 0 0 10px blue, 0 0 0 15px green, 0 0 0 20px purple;.. box-shadow » Cross-Browser Rendering.. box-shadow ist nicht ”gleichmäßig“ implementiert, die Browserhersteller haben das Rendering für Ihre Engine angepasst.. Übersicht der verschiedenen Implementationen.. http://thany.. nl/apps/boxshadows/.. viget.. com/uploads/file/boxshadows/.. box-shadow » Browser-Support.. sowieso.. ab Version 4, seit 3.. 5 mit -moz-Präfix.. ab Version 10.. ab Version 5.. 1, seit 3.. 1 mit -webkit-Präfix.. We can drop vendor prefixes for box-shadow, background-clip, border-radius in CSS now.. Divya Manian (Opera).. Content-Generierung.. :before.. und.. :after.. Pseudo-Elementen.. com/multiple-backgrounds-and-borders-with-css2/.. Ein praktischen Beispiel für :before und :after.. Wie funktioniert das?.. http://l.. maddesigns.. de/h47b5z.. Die Überschrift.. h3 { background-color: #68af21; color: white; font-size: 36px; padding: 20px; position: relative; border-radius: 12px; } h3:before { content: "\0020"; position: absolute; width: 0; height: 0; z-index: 2; bottom: -40px; left: 50px; border-top-color: #68af21; border-style: solid; border-width: 20px; }.. Content-Generierung mit.. Hinweis: zur Visualisierung wird der Inhalt der Demo.. rot.. eingefärbt.. Positionierung.. Zuweisung von.. The Shapes of CSS — http://l.. de/p5Q08r.. :before :after » Browser-Support.. das.. können.. alle.. Browser.. sogar ab Version 8!.. Web-Fonts.. in your @font-face (© Jake Archibald).. In Your @font-face Presentation.. Web-Fonts werden in allen Browsern bis zurück zum IE6 unterstützt.. Das klingt doch gut!.. zu schön um wahr zu sein.. @font-face { font-family: 'DINBold'; src: url("din-bold-webfont.. eot"); src: url("din-bold-webfont.. eot?#iefix") format("embedded-opentype"), url("din-bold-webfont.. woff") format("woff"), url("din-bold-webfont.. ttf") format("truetype"), url("din-bold-webfont.. svg#DINBold") format("svg"); }.. um Gottes Willen.. Font-Face Zuweisung.. font: 48px/1.. 4 'Gloria Hallelujah', cursive;.. normale Schrift.. Schrift mit Webfont.. google.. com/webfonts.. fontsquirrel.. @font-face Generator.. Hintergrundverlauf.. background: linear-gradient();.. aktueller Overhead für alle Browser.. gradient { background-color: yellow; /* Fallback Color */ background: -webkit-gradient(linear,left top,left bottom,from(yellow),to(blue)); background: -webkit-linear-gradient(top, yellow 0%, blue 100%); background: -moz-linear-gradient(top, yellow 0%, blue 100%); background: -ms-linear-gradient(top, yellow 0%, blue 100%); background: -o-linear-gradient(top, yellow 0%, blue 100%); /* aktueller W3C Standard, bisher nicht implementiert */ background: linear-gradient(to bottom, yellow 0%, blue 100%); }.. -webkit-linear-gradient(top, #184070 0%,#819fd6 100%);.. -webkit-linear-gradient(left, #184070 0%,#819fd6 100%);..  ...   background-color: #184070 }.. ohne CSS3.. mit CSS3 transition.. bestimmte Eigenschaften animieren.. a.. transition1 { -webkit-transition: color 1s ease-out; /* weitere Browser Varianten */ } a.. transition2 { -webkit-transition: background-color 1s ease-out; /* weitere Browser Varianten */ } a:hover { background-color: red; color: white; }.. color animiert.. background-color animiert.. CSS Transition » Tools.. Ceaser - CSS Easing Animation Tool (.. matthewlein.. com/ceaser/.. cubic-bezier.. com (.. com.. Link-Tipps.. CSS Transitions 101 (.. www.. webdesignerdepot.. com/2010/01/css-transitions-101/.. Let the Web move you — CSS3 Animations and Transitions (.. webdirections.. org/blog/let-the-web-move-you-css3-animations-and-transitions/.. Transition » Browser-Support.. CSS3 animation.. jetzt kommt Bewegung ins Spiel!.. Ähnlichkeiten zwischen CSS transition und animation.. Beide animieren die Veränderung der CSS-Eigenschaft über einen bestimmten Zeitraum.. Beide haben eine Laufzeit.. Beide haben eine optionale Verzögerung.. Beide verfügen über einen Timing-Funktion mit den gleichen Werten (cubic-bezier).. Die Unterschiede von CSS animation zu transition.. Animationen können beliebig oft wiederholt werden.. Animationen können vorwärts und rückwärts laufen.. Animationen können eine beliebige Anzahl von definierten Zwischenstufen "Keyframes" haben.. Transitions haben nur einen definierten Anfang- und Ende-Status.. Mit Transition kann auf eine zu animierende Eigenschaft reduziert werden.. Bei Animation müssen jeweils neue Keyframe-Sets dafür definiert werden.. @-webkit-keyframes pulse { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(2); } }.. animation { -webkit-animation: pulse 1s ease 0s alternate none infinite; -moz-animation: pulse 1s ease 0s alternate none infinite; animation: pulse 1s ease 0s alternate none infinite; }.. animation:hover { -webkit-animation-play-state:paused; -moz-animation-play-state:paused; animation-play-state:paused; }.. Animation Eigenschaften.. Shorthand:.. /* plus prefix */ animation: pulse 1s ease 0s alternate none infinite;.. Einzeleigenschaften.. animation-name: pulse animation-duration: 1s animation-timing-function: ease animation-delay: 0s animation-direction: alternate animation-fill-mode: none animation-iteration-count: infinite.. CSS Animation » Tools (fertige "Libraries" mit Keyframe-Sets).. Animate.. css (.. daneden.. me/animate/.. Animatable (.. leaverou.. com/animatable/.. Umsichtig mit den Animationen vorgehen!.. Animation » Browser-Support.. ???.. Responsive Web.. Auf Umgebung und Engeräte reagieren.. unzähle Geräte mit unterschiedlichsten Bildschirmgrößen.. /* Smartphones (portrait and landscape) */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* iPads (portrait and landscape) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* Desktops and laptops */ @media only screen and (min-width : 1024px) { /* Styles */ }.. get auch bei extern eingebundenen Files.. keine statische Bildgrößen.. img { max-width: 100%; }.. Beispiel-Gelerien - mediaqueri.. niedriger Entwicklungsaufwand, weil das gleiche HTML als Basis dient.. einfach für bestehende Seiten optimieren.. Alle Resource werden geladen, auch wenn sie nicht angezeigt werden (.. display:none.. um so größer die Website, desto schwieriger kann es werden.. speziell entwickelte Webapps können im Einzelfall besser sein.. @media » Browser-Support.. japp.. jo.. ja.. Lösung für IE7/IE8.. respond.. js -.. com/scottjehl/Respond.. ist mittlerweile auch in modernizr integriert.. CSS - der nächste Schritt.. Coding mit SASS Compass.. SASS Compass als Metasprache für CSS.. SASS (Syntactically Awesome Stylesheets) bietet neue Möglichkeiten für CSS, z.. Variablen, Verschachtelung oder Code-Snippets.. SASS Compass.. Compass ist ein Framework, dass SASS erweitert und z.. eigene Code-Snippets mitbringt.. zudem bietet Compass ein umfangreiche Funktionen, die das Schreiben von CSS erleichtern.. SASS kompiliert zu sauber strukturiertem CSS.. Nutzung von Variablen und Nesting (Verschachtelung).. scss */ $navbar-width: 800px; $items: 5; $navbar-color: #ce4dd6; nav { width: $navbar-width; border-bottom: 2px solid $navbar-color; li { float: left; width: $navbar-width/$items - 10px; } a { background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } } }.. kompiliertes CSS.. nav { width: 800px; border-bottom: 2px solid #ce4dd6; } nav li { float: left; width: 150px; } nav a { background-color: #e5a0e9; } nav a:hover { background-color: #d976e0; }.. Compass CSS3 Mixins.. box { @include border-radius(4px); }.. schönes Feature.. automatische Spriting.. org/help/tutorials/spriting/.. ”Wer SASS Compass nicht probiert hat, kann nicht darüber urteilen..

    Original link path: /css3-responsive/template/
    Open archive

  • Title: CSS3 im praktischen Einsatz, maddesigns (Sven Wolfermann) #wdc11
    Descriptive info: im praktischen Einsatz.. maddesigns | Sven Wolfermann.. WebDevCon Hamburg, 17.. 10.. Pfeiltasten zur Navigation nutzen.. runde Ecken.. web DevCon.. Die Konferenz für Web-Entwickler.. Was mache ich denn mit dem IE6-8?.. naja.. geht auch irgendwie.. filter:progid:DXImageTransform.. Shadow⏎ (color=#e2e2e2, Direction=135, Strength=5); /* IE6-7 */ -ms-filter:"progid:DXImageTransform.. Shadow⏎ (color=#e2e2e2, Direction=135, Strength=5)"; /* IE8 */ zoom: 1; /* trigger hasLayout */.. Schatten.. apropos Schatten – Was ist mit Text-Schatten?.. text-shadow » Werte-Set wie box-shadow.. inset.. wird nicht unterstützt.. Das ist der Text.. text-shadow: 2px 2px 5px red;.. Ich brauch 'ne Brille.. text-shadow: 2px 2px 8px gray;.. color: transparent;.. text-shadow » Browser-Support.. keine Frage.. ab Version 3.. 1.. erst ab Version 10.. Hm.. und für aktuelle Internet Explorer?.. wenn.. zugewiesen ist, wird der Text ganz normal (ohne Schatten) dargestellt.. man kann auf.. filter.. zurückgreifen, das beeinflusst allerdings das Font-Rendering – es wird unschön und..  ...   absolute; width: 0; height: 0; z-index: 2; bottom: -40px; left: 50px; border-top-color: #68af21; border-style: solid; border-width: 20px; }.. Content generieren.. -webkit-linear-gradient(top, #c9de96 0%,#398235 100%);.. -webkit-linear-gradient(left, #a6c742 0%,#68af21 100%);.. -webkit-linear-gradient(bottom, #a6c742 0%,#68af21 100%);.. -webkit-linear-gradient(right, #a6c742 0%,#68af21 100%);.. bis 33% hellgrün » ab 66% » grün.. -webkit-linear-gradient(top, #a6c742 0%, #a6c742 33%, #68af21 66%, #68af21 100%);.. harte Kante bei 50%.. -webkit-linear-gradient(top, #a6c742 0%, #a6c742 50%, #68af21 50%, #68af21 100%);.. -webkit-linear-gradient(top, #a6c742 0%, #68af21 50%, #a6c742 100% );.. von hellgrün » grün » türkis.. -webkit-linear-gradient(top, #a6c742 0%, #68af21 50%, #00aaaa 100% );.. -webkit-linear-gradient(left, #68af21 0%, #68af21 20%, #a6c742 20%, #a6c742 80%, #68af21 80%, #68af21 100%);.. -webkit-linear-gradient(left, #a6c742 0%, #a6c742 50%, #68af21 50%, #68af21 100%);.. -webkit-linear-gradient(-45deg, #a6c742 25%, #68af21 25%, #68af21 50%, #a6c742 50%, #a6c742 75%, #68af21 75%, #68af21 100%); background-size: 100px 100px;.. Verlauf.. Webfont.. Wer war die Flitzpiepe da überhaupt?.. TYPO3camp Berlin Orga..

    Original link path: /css3/css3-im-praktischen-einsatz.html
    Open archive

  • Title: CSS3 in practice, maddesigns (Sven Wolfermann) #css3
    Descriptive info: CSS3 in practice.. maddesigns | Sven Wolfermann.. use arrow keys to navigate.. rounded corners! YEAH!!!!111eleven.. border-radius » enlarge box.. border-radius » browser-specific prefixes.. all modern browsers and IE9 understand.. border-radius » browser support.. for sure.. from version 4, a bit buggy in 3.. from version 11.. a bit buggy with.. and percentage values.. from version 9.. ”But my IE7 does not show rounded corners!“.. It doesn't have to!.. There is no good (simple) way to show rounded corners in IE6-8.. The better approach is to omit rounded corners.. The content will not get better with rounded corners.. Browser market in Europe.. rounded corners.. The Conference for web developer.. drop shadow - whoohoo!.. box-shadow » browser specific prefixes?.. necessary for iPhone Android.. box-shadow » different offset / spread values.. multiple box-shadows.. split multiple shadows with comma.. multiple borders with box-shadow.. box-shadow » cross browser rendering.. box-shadow has not been distributed equaly to the different browsers, the manufacturers adopted box-shadow to their rendering engines separately.. Overview of different implementations.. box-shadow » browser support.. anyway.. from version 4, since 3.. 5 with -moz-prefix.. from version 10.. from version 5.. 1, since 3.. 1 with -webkit-prefix.. What the heck am I goin to do with IE6-IE8?.. well.. There are ways, Dude.. You don't wanna know about it, believe me.. drop shadow.. The conference for web developer.. by the way: shadow – what about text-shadow?.. text-shadow » value set like box-shadow.. is not supported.. This text has shadow.. I need glasses!.. Meet the Letter-Heads – Mozilla text-shadow demo.. https://mozillademos.. org/demos/shadows/demo.. html..  ...   with.. positioning.. add.. read more about triangles in CSS.. :before :after » browser support.. that.. is supported.. in all.. browsers.. even in IE8!.. the conference for web developer.. background gradients.. current overhead for all browsers.. gradient { background-color: yellow; /* Fallback Color */ background: -webkit-gradient(linear,left top,left bottom,from(yellow),to(blue)); background: -webkit-linear-gradient(top, yellow 0%, blue 100%); background: -moz-linear-gradient(top, yellow 0%, blue 100%); background: -ms-linear-gradient(top, yellow 0%, blue 100%); background: -o-linear-gradient(top, yellow 0%, blue 100%); /* current W3C standard, not implemented yet */ background: linear-gradient(to bottom, yellow 0%, blue 100%); }.. linear-gradient — multistage (stop colors).. to 33% light green » from 66% » green.. sharp edge at 50%.. from 0 to 50% to 100%.. light green » green » cyan.. linear-gradient — sharp edges.. use linear-gradient for faux columns.. Linear Gradient - Detaillierter Farbverlauf.. (german blog post).. Gradients in CSS3.. other gradient functions.. gradients » browser support.. with -webkit-prefix.. with -moz-prefix.. with -o-prefix.. comes in IE10 with -ms-prefix.. Hm, so can I really use it with real world projects?.. Sure!.. To be honest, it's a prefix hell but works pretty good.. And for IE, a PNG background fallback is the best solution.. And here is a nice online helper for gradient CSS:.. generate content.. background gradient.. Web-Fonts are supported in every browser even in IE6.. That's perfect!.. too good to be true.. what the hell.. Font-Face assignment.. normal font.. font with webfonts.. @font-face generator.. linear gradients.. Thank you for your attention!.. Who was that dude?.. , 34 - Freelancer from Berlin.. TYPO3camp Berlin.. organization team.. writes for the.. Webstandards-Mag..

    Original link path: /css3/css3-in-practice.html
    Open archive

  • Title: “CSS & Performance” Vortrag auf dem TYPO3camp München | maddesigns
    Descriptive info: CSS Performance Vortrag auf dem TYPO3camp München.. 12.. September 2010.. Mein Vortrag beim TYPO3camp 2010 in München handelte von CSS und was man beim Stylesheet-Schreiben beachten kann um Dateigröße und Ladezeiten von CSS zu verringern.. Nachfolgend die.. Präsentation: CSS Performance.. auf.. Prezi.. -Basis.. Teil 1: CSS.. Das Optimierungspotenzial beim Komprimieren einer CSS-Datei liegt zwischen 30%-70%, je nachdem wie gut man im Vorfeld schon gearbeitet hat.. Was kann also man im Vorfeld beachten?.. Schnelle Selektoren.. Die unterschiedlichen Selektoren in CSS sind sicherlich bekannt, man kann HTML-Elemente direkt oder durch deren Attribute „class“ und „id“ ansprechen.. Dabei sind die schnellsten Selektoren die Typ-Selektoren, Klassen- und ID-Selektoren sind ebenfalls schnell.. Langsam hingegen sind die Kombinatoren, am häufigsten Verwendung finden sicherlich die Nachfahrenkombinatoren (descent combinators), der der langsamste aller Selektoren ist.. Etwas schneller ist da der Kindkombinator (child combinators).. Beispiel:.. schnellste -> a auch schnell ->.. link langsam -> div > div > div > p > a.. link sehr langsam -> div div div p a.. link.. Warum ist das langsam?.. Der Browser liest CSS von RECHTS nach LINKS.. Er sucht erst alle a -Tags, schaut dann welche von denen ein li als Elternelement haben, sortiert diese aus und schaut danach welche ul als Elternelement haben und weist dann die Farbe #f00 zu.. Das ist durchaus anders als man erwarten könnte und z.. in Javascript gehandhabt wird.. Extrem langsam ist der Universal-Selektor, der sogenannte „star“-Selektor.. Einen Vergleich verschiedener Selektoren hat Steve Sounders auf.. http://stevesouders.. com/efws/css-selectors/universal.. php.. veröffentlicht.. Wie werden die Selektoren gewichtet?.. * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up] {}/* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.. red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.. red.. level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */.. Typ-Selektoren und Pseudo-Klassen werden quasi als Einerstellen gewichtet.. Attribut-Selektoren und Klassen als Zehner-Stellen, ID-Selektoren als Hunderter-Stellen.. Und das style-Attribut in HTML ist sozusagen die Tausender-Stelle.. Das einmal verinnerlicht, hilft, wenn mal wieder eine Eigenschaft überschrieben werden muss.. CSS-Reset.. Bei einem CSS-Reset werden Browservorgaben zurückgesetzt, man fängt bei Null an zu gestalten.. Ein einfacher Reset ist.. * { margin: 0; padding: 0; }.. Dabei  ...   hat man damit die Eigenschaften.. margin-right, margin-left.. margin-bottom.. abgedeckt, und zwar mit dem Wert 0.. margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;.. wird zu:.. margin: 10px 20px 30px 40px.. Gibt es für Margin 4 verschiedene Werte, werden diese in Uhrzeigerrichtung angegeben, also.. top, right, bottom.. left.. Sind.. right.. gleich, wird der Wert an der 2.. Stelle für beide Seiten verwendet.. margin: 10px 20px 30px.. Sind jeweils.. top.. bottom.. sowie.. gleich, verwendet man folgende Schreibweise:.. margin: 10px 20px.. Letztlich werden alle 4 Seiten so zusammen gefasst:.. margin: 10px.. Man sollte immer und ausschließlich mit Shorthands arbeiten, da ein späteres Überschreiben von Langanweisungen mit einer Shorthand-Anweisung nicht möglich ist.. Wir haben z.. margin-top: 10px; margin: 5px 0 0;.. Der neue Wert für margin-top wird in dem Fall ignoriert.. Weitere Kurzschreibweisen.. padding: 10px 20px 30px 40px; border: 1px solid red; background: #000 url(pic.. png) no-repeat right bottom; font: bold 16px/1.. 2 Arial, Helvetica, sans-serif; list-style: square inside url(images/bullet.. png);.. und natürlich Kurzschreibweise für Farbwerte:.. #ffffff -> #fff.. Best practice.. Zuweisungen zusammenfassen.. Mehrere Selektoren mit der gleichen Zuweisung können zusammengefasst werden.. h1, h2, h3 {margin: 10px 0}.. multiple Klassen im HTML zuweisen.. anstatt immer neue spezifische Klassen zu erfinden, weitestgehende generische Klassen verwenden und dann im HTML mehrere Klassen zuweisen.. div class= box right /div.. Das letzte Semikolon kann weg gelassen werden.. Eine Einsparmaßnahme, die beim Komprimieren meist automatisch passiert.. Null-Werte ohne Einheit => h3 {margin: 0}.. Es ist nicht notwendig 0px zu schreiben, die Einheit kann weggelassen werden.. font-weight: 700 => bold, font-weight: 400 => normal.. Kurzschreibweise für bold = 700, für normal = 400 (minimales Einsparpotential).. CSS-Hacks vermeiden => Conditional Comments.. Keine Hacks für IE innerhalb des Hauptstylesheet, Conditional Comments verwenden.. http://standards.. webmasterpro.. de/index-article-cc.. CSS komprimieren.. Für den Live-Gang eine komprimierte Version erstellen und nur diese in der Live-Version einbinden.. blogrammierer.. de/css-online-css-komprimierungstools-im-uberblick/.. Kommentare.. Verwenden von Kommentaren ist nicht nur in der Teamarbeit dringend zu empfehlen.. Kommentare können auch ausführlicher sein oder im „Javadoc“-Stil, sodass automatische Dokumentationen daraus erstellt werden können.. http://phpugffm.. de/index.. php/adaption-des-javadoc-standards-in-css,2007-05,193.. Print-Styles in das default-Stylesheet übernehmen.. body { color:#333; background-color:#ccc } @media screen, projection { body {background-image:url(background.. png)} } @media print { body {background-color: #fff; color:#000} }.. In Teil 2 geht es um die Performance-Optimierung im Browser.. Im nächsten.. TY-MA.. zeige ich, was man bei der Einbindung von CSS und Javascript in HTML optimieren werden kann.. Welche Tipps habt ihr noch?.. Tweet.. tipps.. Beitragsnavigation.. Vorheriger Beitrag.. [How to] Twitter s offiziellen Tweet-Button in WordPress Blogs einbinden.. Nächster Beitrag.. optionale Silbentrennung für den TYPO3 Redakteur.. Ein Gedanke zu CSS Performance Vortrag auf dem TYPO3camp München.. Pingback:.. CSS Performance Artikel Teil 2 | maddesigns.. Kommentare sind geschlossen.. Werk 83.. Pepo..

    Original link path: /css-performance-vortrag-auf-dem-typo3camp-munchen-203.html
    Open archive

  • Title: “CSS & Performance” Artikel Teil 2 | maddesigns
    Descriptive info: CSS Performance Artikel Teil 2.. 3.. Februar 2011.. Beim TYPO3camp 2010 in München hielt ich eine Vortrag zum Thema CSS Performance.. Im.. Teil 1.. ging es überwiegend um das Optimieren von CSS.. Im 2.. Teil geht es um die Frontend-Performance, also die Optimierung der Ladezeit.. Teil 2: Performance.. Seit einiger Zeit bezieht Google die.. Ladezeit der Website.. in die Berechnung der Suchergebnisposition mit ein.. Auch wenn es nur ein kleiner Teil der vielen Faktoren ist, sieht Google den Grund dafür, dass schnelle Webseiten dem User nützlich sind.. Um die Ladezeit zu verbessern kann man nicht nur serverseitig Optimierung, wie Optimierung der Datenbank-Abfragen, verbesserte Funktionsaufrufe der jeweiligen Programmiersprache oder die Serverleistung durch Hardware-Optimierung durchführen, sondern man kann viel mehr beim Laden von Bilder, CSS und Javascript optimieren.. Bilder optimieren.. Für Grafiken sollte man das Bildformat PNG vor GIF bevorzugen, da man PNG besser komprimieren kann und zudem das vielseitigere Format ist.. Für Logo-Grafiken oder andere grafische Elemente ist das Format PNG8 mit bis zu 256 Farben (ähnlich GIF) zu verwenden.. Möchte man Transparenzen (z.. weiche Schatten) in Bildern verwenden, ist PNG24 das übliche Format für weboptimierte Bilder.. Diese Grafiken werden problemlos in allen modernen Browsern.. JPG sollte man ausschließlich für Fotografien verwenden.. Hier muss man abwägen, wie stark die Komprimierung sein soll, je stärker, desto kleiner die Bildgröße.. Nach Erstellung der weboptimieren Grafiken durch Photoshop’s Export oder Fireworks sollte man die PNG-Bilder mit einem zusätzlichen Programm optimieren.. Crushing PNG.. heißt die Methode und entfernt unnötige Bilddaten, bzw.. komprimiert diese.. Das für die Kommandozeile von Linux entwickelte Tool,  ...   HTTP-Requests, der Reduzierung der Gesamtgröße der Bilder und somit in der Verkürzung der Ladezeit von Webseiten.. Einen umfassenden Artikel von mir gibt es dazu im Webstandard-Blog „.. CSS Sprite Ladegeschwindigkeit optimieren und HTTP-Requests verringern.. “.. Webseiten die CSS-Sprites einsetzen:.. Google, Amazon und selbst TYPO3 setzt seit der Version 4.. 4 auf Sprites für das Backend.. Rendering optimieren.. Grundsätzlich sind hier die „.. Performance Rules.. “ von Yahoo zu nennen.. Regeln, die man leicht und ohne zusätzliche Serverstruktur umsetzen kann, sind:.. CSS mit link in den head einbinden.. @import vermeiden (.. stevesouders.. com/blog/2009/04/09/dont-use-import/.. Javascript vorm schließenden /body wenn nicht onload-relevant.. Wenn JS im Head, dann nach CSS, weil Javascript das Rendering blockiert.. Javascript und CSS extern einbinden (sind dann vom Browser cachebar).. Komprimieren und Zusammenfügen.. Max 4 Dateien mit 10kb gleichzeitig, sind schneller als eine große Datei.. Mit GZIP komprimiert ausliefern.. Tools.. Standard-Tools für Firebug sind.. Yslow.. Pagespeed.. die ähnliche Punkte der aktuellen Webseite prüfen.. Webpagetest.. ist ein Online-Service mit dem man die Performance der Website an unterschiedlichen Server-Standorten der Welt und mit unterschiedlichen Verbindungsgeschwindigkeiten testen kann.. Ein weiteres Highlight ist die visuelle Gegenüberstellung eines Aufrufs mehrerer Webseiten.. Ein Beispiel wäre der Test für ein Relaunch-Projekt.. Ist die aktuelle Entwicklungswebsite online erreichbar, kann man die mit der bestehenden in Puncto Ladegeschwindigkeit gleichzeitig testet.. Dabei wird ein Video generiert, dass deutliche Unterschiede zeigt (sofern vorhanden).. Weitere Spielwiesen:.. http://websiteoptimization.. com/services/analyze/.. http://tools.. pingdom.. httpwatch.. com/cuzillion/.. empfohlene Bücher.. books.. css sprites.. image-renderung.. js.. tools.. WebKit ändert CSS3 Gradient Support und orientiert sich am Mozilla Syntax.. CSS3 gradient jetzt auch in Opera..

    Original link path: /css-performance-artikel-teil-2-751.html
    Open archive

  • Title: IE9 border-radius right-to-left (direction: rtl) Bug | maddesigns
    Descriptive info: IE9 border-radius right-to-left (direction: rtl) Bug.. 22.. März 2012.. Wer schon mal Layouts für arabische Websites umgesetzt hat, kennt sicherlich das HTML-Attribut.. dir.. , das man z.. im body-Tag einfügen kann um die Leserichtig des Dokuments von links-nach-rechts auf rechts-nach-links zu ändern.. In CSS ist die Anweisung direction dafür zuständig.. Für beide Möglichkeiten kann man die Werte rtl (right-to-left) oder ltr (left-to-right) sowie auto angeben.. Hat man im Layout, runde Ecken (border-radius) nur an einer Seite, z.. rechts abgerundet, dann sind im IE9 die Ecken allerdings links abgerundet.. Der IE9 dreht von sich aus die runden Ecken im RTL-Modus um.. Das ist zwar nett vom IE9, aber nicht richtig und auch nicht immer gewollt.. Bei gleichmäßig abgerundeten Ecken kann man den Bug natürlich nicht nachvollziehen, deshalb fällt er selten auf.. Hier mal ein jsFiddle-Beispiel:.. Im IE9 sieht das allerdings so aus (Screenshot):.. Der simplifizierte HTML-Aufbau:.. body dir="rtl"> div class="box"> right to left /div> /body>.. CSS:.. box { background-color: red; padding: 48px;  ...   bis zum Build 8250 auch noch nachzuvollziehen.. Den Bug hat.. Andrea Herzog-Kienast.. entdeckt und ich kann das Verhalten leider nur bestätigen.. right to left.. rtl.. Livereload ein Browser Refresh Tool.. Sass Compass Introduction.. 6 Gedanken zu IE9 border-radius right-to-left (direction: rtl) Bug.. hannes.. sagt:.. März 2012 um 11:40.. Hm, oftmals wird ja bei einer Arabischen Seite nicht nur die Laufrichtung des Texts umgestellt, sondern das Layout als gesamtes.. Und dann, aber nur dann, macht es vielleicht Sinn?.. März 2012 um 11:42.. Das denkt sich der IE9 so, aber er macht es nicht richtig oder alle anderen Browser machen es falsch.. Webrocker.. März 2012 um 12:10.. Cool.. Spiegelt der IE auch die HIntergrundgrafiken?.. März 2012 um 14:22.. Natürlich nicht.. Da kommen sonst vielleicht ganz komische Sachen raus.. Mohammed Abdella.. 25.. März 2012 um 09:49.. yes that s happened to me once.. Der Kieler.. 4.. April 2012 um 19:19.. Ganz tolle Sache, da werd ich gleich mal versuchen was zu basteln.. Herzlichsten Dank.. !..

    Original link path: /ie9-border-radius-direction-rtl-bug-1657.html
    Open archive

  • Title: Right To Left | maddesigns
    Descriptive info: Schlagwort-Archiv: right to left..

    Original link path: /tag/right-to-left
    Open archive

  • Title: Rtl | maddesigns
    Descriptive info: Schlagwort-Archiv: rtl..

    Original link path: /tag/rtl
    Open archive

  • Title: Das große Weihnachtsgewinnspiel – Tag 24 im CSS3 Adventskalender 2011 | maddesigns
    Descriptive info: Das große Weihnachtsgewinnspiel Tag 24 im CSS3 Adventskalender 2011.. Dezember 2011.. …im.. Webstandard Blog.. Großartige Preise haben uns.. galileo-videotrainings.. galileo-press.. addison-wesley.. oreilly.. webstandards-magazin.. zur Verlosung an die Leser des CSS3 Adventskalender zur Verfügung bestellt.. Was man muss tun, um gewinnen zu können?!.. …wird im Webstandard-Blog erklärt:.. Das große Weihnachtsgewinnspiel.. Allen Teilnehmern viel Spaß, Glück natürlich auch Erfolg!.. Box-Sizing – CSS3 Adventskalender Tag 23..

    Original link path: /das-grose-weihnachtsgewinnspiel-tag-24-im-css3-adventskalender-2011-1625.html
    Open archive

  • Archived pages: 254