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: Compass & SASS – CSS3 Adventskalender Tag 17 | maddesigns
    Descriptive info: Compass SASS – CSS3 Adventskalender Tag 17.. Dezember 2011.. 18 Kommentare.. Natürlich beschäftigt sich der diesjährige CSS3 Adventskalender auch mit dem Thema SASS Compass.. Was SASS Compass so effizient macht beim Schreiben von CSS hat.. Mathias Schäfer.. (.. molily.. ) bereits sehr umfassend im.. Webkrauts-Adventskalender.. -Artikel Effiziente CSS-Entwicklung mit Sass und Compass (.. Teil 1.. Teil 2.. ) gezeigt.. Neue Techniken bringen natürlicherweise auch viel.. Diskussion.. mit sich.. Und nur weil man einen Pre-Processor wie SASS verwendet, schreibt man nicht automatisch.. besseres.. Es muss schon ein gewisses Verständnis von CSS vorhanden sein, damit.. SASS.. LESS.. Stylus.. Closure.. und MyNewCssPreProcessor auch effizient eingesetzt werden kann.. Leichter Einstieg.. Durch die neue Schreibweise SCSS (“Sassy CSS”) wurde zudem der Einstieg in SASS erleichtert.. Das hilft Einsteigern mit bestehenden Code die ersten Features von SASS auszuprobieren und so schnellere Erfolge zu erzielen.. Bestehendes CSS in SCSS konvertieren (geht auch zu SASS und auch von SASS zu SCSS, ).. # Convert CSS to SCSS $ sass-convert style.. css style.. scss.. Das wird über das jeweilige Kommandozeilen-Tool gemacht, gibt es aber auch.. online.. Zur Installation von.. und.. Compass.. gibt es auch zahlreiche Anleitungen im Netz, auch für.. Windows.. oder als.. App.. Das sollte also kein Problem darstellen.. Einige nützliche Beispiele habe ich im Folgenden mal zusammen getragen.. Aktuell starte ich meine Projekte mit dem Starter-Kit von.. xtine.. , das die HTML5 Boilerplate, Compass, SASS und normalize.. css schon mitbringt (.. compass-sass-html5boilerplate.. ).. Schön finde ich die Import-Funktion von SASS, so lassen sich gesplitete CSS (SASS)-Dateien zu einer zusammenfüren.. @import "modules/base"; @import "partials/header", "partials/footer";.. Dabei werden Dateien, die mit Unterstrich beginnen direkt ins fertige CSS kompiliert, z.. _base.. scss.. , wo hingegen Dateien ohne Unterstrich, z.. base.. zusätzlich als separate CSS-Datei (z.. css.. ) durch den Watch-Prozess angelegt werden.. Partials können auch in Anweisungen importiert werden:.. @media only screen and (min-width: 320px) { @import "partials/up320"; }.. Elternselektor.. Die Selektierung von Elternelementen ist für mich ebenfalls unschlagbar.. article h1 { font-size: 2em;.. index { font-size: 1.. 6em; } }.. wird zu:.. article h1 { font-size: 2em; }.. index article h1 { font-size: 1.. 6em; }.. So kann direkt in der Anweisung eine andere Schriftgröße für H1 auf der Startseite vergeben werden.. Compass Multifunktions-Tool.. Bild von http://sonspring.. com/journal/sass-for-designers.. Meiner Meinung nach macht SASS erst mit dem CSS-Framwork.. richtig Sinn.. Compass bringt eine Vielzahl von Funktionen und Mixins mit, die das Schreiben von CSS erleichtern.. Das o.. a.. Bild zeigt es meiner Meinung nach sehr treffend.. Gerade im CSS3-Bereich spielt Compass seine Stärken aus, hier ist ein großes Set an.. CSS3-Mixins.. bereits enthalten und werden.. ständig nachgepflegt.. Ein dickes Feature ist sicherlich das Generieren von Sprites-Grafiken (.. warum Sprites?.. ), dazu gibt es ein umfangriches.. Tutorial auf der Compass-Website.. CSS3 Mixins.. Linear-Gradients sind nach wie vor mühsehlig, für alle Browser müssen Anweisungen mit Vendor-Prefixe geschrieben werden, aktuell sieht ein simpler.. cross-browser Linear-Gradient.. so aus:.. 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%); }.. mit Compass sieht die Anweisung so aus:.. gradient { @include background(linear-gradient(top, yellow, blue)); }.. zusätzlich könnte man noch SVG-Support für IE9 und ältere Opera über.. $experimental-support-for-svg: true;.. aktivieren, sowie die älteren Internet Explorer (IE6-IE8) mit Filtern ausstatten:.. 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); } }.. das wird dann wie folgt kompiliert.. 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'); }.. Globale Variablen wie.. $experimental-support-for-svg.. werden für das gesammte Compass-Projekt gesetzt (wie der Name schon sagt).. Wenn man im nächsten Gradient keinen SVG-Support wünscht, müsste man.. in der Anweisung wieder auf.. false.. setzen.. $experimental-support-for-khtml: false;.. kann eigentlich als Default in.. gesetzt werden.. Man kann auch den Support von IE6 oder IE7 deaktivieren, wenn das für das Projekt nicht nötig ist:.. // _base.. scss $experimental-support-for-khtml: false; $legacy-support-for-ie6: false; $legacy-support-for-ie7: false;.. Aber nicht alle CSS3-Mixins sind zu empfehlen, border-radius ist überfrachtet und kann mittlerweile auch.. ohne Vendor-Präfix.. eingesetzt werden.. box { @include border-radius(); }.. wird zu.. box { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }.. Hier ist einiges zu viel und zudem falsch (-ms-border-radius).. Hier reicht also einfach:.. box { border-radius: 5px; }.. Nützlich ist auch das Mixins für Links.. Wenn man Links mit alle dynamischen Pseudoklassen stylt, sieht das mit SASS so aus:.. $color-main: #0089B3; a { text-decoration: none; color: $color-main; :hover { text-decoration: underline; color: darken($color-main, 10%); } :focus { color: darken($color-main, 10%); } :active { color: invert($color-main); } :visited { color: darken($color-main, 30%); } }.. In Compass kann man daraus einen Zweizeiler machen:.. a { @include hover-link; @include link-colors( $color-main, darken($color-main, 10%), invert($color-main), darken($color-main, 30%), darken($color-main, 10%) ); // hier zur Übersichtlichkeit mehrzeilig }.. wird zu.. a { text-decoration: none; color: #0089b3; } a:hover { text-decoration: underline; } a:visited { color: #00141a; } a:focus { color: #006280; } a:hover { color: #006280; } a:active { color: #ff764c; }.. Ja, Compass fasst.. :hover.. :focus.. nicht zusammen, aber das kann man sicherlich verschmerzen genau solche Beispiel sind es die Kritiker dann auf den Plan bringen.. Bild: http://sonspring.. Gerne bin ich bereit über Sinn und Unsinn in den Kommentaren zu diskutieren..  ...   noch nicht im Google-Reader angekommen.. Frederic.. Dezember 2011 um 12:11.. @Andi: Natürlich ist es dir freigestellt, ob du Präprozessoren wie SASS verwenden möchtest.. Deine Argumentation kann ich aber irgendwie nicht nachvollziehen:.. Es gibt als weit verbreitete Standards eigentlich nur SASS und LESS.. SASS ist z.. mittlerweile das Standardformat für aktuelle Ruby on Rails-Applikationen, LESS wird z.. auch von Twitter produktiv verwendet (z.. im Twitter-Bootstrap-Projekt).. Für Node.. js wurde Stylus von TJ Holowaychuk entwickelt (der auch schon einige andere sehr bekannte Frameworks für Node.. js geschrieben hat), wobei die Verbreitung von Stylus noch sehr gering ist.. Wenn du also nicht im Node.. js-Bereich arbeitest, kann man das Framework momentan sogar noch vernachlässigen.. mit dran arbeiten müssen.. In wiefern schränkt es die Leute ein? Es ist ein Superset von CSS und syntaktisch soweit identisch.. Die Erweiterungen wie z.. Mixins lehnen sich im Syntax an bestehende CSS-Features (@import, @media, etc.. ) an und sind schnell zu lernen.. Du bist auch in der Anwendung sehr flexibel, so dass du Features nach und nach einsetzen kannst.. Hinzu kommt, dass einige der Features, die heute mit SASS schon möglich sind, in die CSS-Spezifikationen übernommen wurden und in CSS4 enthalten sein werden.. Man kann also sagen, dass man hier recht zukunftssicher arbeiten kann.. Was ist wenn das gewählte System irgendwann mal eingestellt wird?.. SASS, LESS und Stylus sind alle Open Source unter MIT-Lizenz und stehen auf GitHub zu Verfügung, können also problemlos eigenständig weiter entwickelt werden.. Muss Compass auf dem Webserver laufen?.. Nein, das ist nicht erforderlich.. Welcher Webserver hat schon Ruby?.. Wenn man mal von Billig-08/15-Hostern absieht, ist das kein Problem, das wird von vielen professionellen Anbietern schon angeboten, sobald du einen eigenen VServer hast, kannst du es auch problemlos selbst installieren.. Du kannst es dir sogar NOCH einfacher machen: Es gibt mittlerweile kostenlose Tools für Windows und Mac, die dir die Installationsarbeit von SASS und Compass abnehmen und automatisch bei Änderungen am Source eine neue CSS-Datei kompilieren: z.. CodeKit (Mac):.. webkrauts.. de/2011/12/16/codekit-der-alleskoenner-unter-den-tools-fuer-frontendentwickler/.. oder Scout (Mac/Windows):.. http://mhs.. github.. com/scout-app/.. Dezember 2011 um 12:21.. @Janek Ja, der Frederic hat mich schon gerügt.. Gunnar Bittersmann.. Dezember 2011 um 17:28.. Es gibt noch mehr Nieten zu zählen: „Elternselektor“??.. „Die Selektierung von Elternelementen ist für mich ebenfalls unschlagbar.. “ Für mich ist sie vor allem eins: in CSS 3 _unmöglich_.. Ein Eltenelement zu selktieren hieße ja, bei das foo -Element zu seleketieren, wenn es Eltenelement von bar ist.. Andersrum wird’n Schuh draus: Man kann bar selktieren, wenn es Kind von foo ist.. Mit dem Selektor foo bar tut man aber nicht (nur) das, sondern selektiert bar auch dann, wenn es (Ur)*enkel von foo ist.. „Elternselektor“ ist doppelt falsch: zum einen stimmt die Richtung nicht, zum anderen muss es nicht Kind-, sondern Nachfahrenselektor heißen.. Dezember 2011 um 22:26.. Zugegeben, das Beispiel mit den Elternselektoren ist nicht ausschöpfend erklärt, aber so wird die Technik nunmal in SASS genannt (.. http://thesassway.. com/intermediate/referencing-parent-selectors-using-ampersand.. Nein, es gibt keine Möglichkeit mit CSS3 Elternelemente zu selektieren, aber es geht hier um SASS und Compass, da kann ich recht einfach mit dem Ampersand ( ) dem Ruleset einen Selektor voranstellen um das Regelset um einen Vorfahrenselektor zu erweitern.. In meinem Beispiel ist es die Überschrift.. h1.. innerhalb von.. article.. , die beim Elternselektor.. index.. kleiner ist, als auf anderen (Unter-)seiten.. 19.. Dezember 2011 um 14:18.. BTW, die Bilder mit Soldaten und Knarre finde ich unpassend und geschmacklos.. Dezember 2011 um 16:44.. Captain America ist doch ne Comic-Figur.. Compass und Sass haben was F-LOG-GE.. maik.. 5.. März 2013 um 09:55.. rgbapng wenn man in einer windowsinstallation scout verwendet wie lässt sich das plug intgrieren? Hab mir manuell das github Zip in den gems ordner geladen nur wird es in der SCSS nicht gefunden.. File to import not found or unreadable: rgbapng.. Muss man da die Load Paths anpassen? Wo sieht man im Github welches file wohin gehört.. März 2013 um 10:16.. Hast du versucht über die Console zu installieren?.. gem install compass-rgbapng.. März 2013 um 12:29.. Ja klar, das war natürlich der erste Ansatz.. Doch da brauche ich einen Zugriff auf das Download-Repository, oder? Scout ist bei mir in einem Offline Host installiert und kompiliert die CSS-Dateien auf ein guest-host Netzlaufwerk.. Dieses lasse ich dann auf Änderungen überwachen und per FTP synchen.. Bei Contao Plugins habe ich die XML zum entpacken, bzw aus der Ordnerhierarchie ist gut zu erkennen was wo hingehört, wenn ich offline außerhalb des Repository arbeite.. MIt Scout bin jetzt schon soweit:.. layouttest-article {.. background: png_base64(rgba(0, 0, 0, 0.. 2)); // ist wohl nicht Sinn der Sache, bzw.. invalide.. background: rgba(0, 0, 0, 0.. 2);.. Nur sobald ich den require rgbapng in der config.. rb setze, bekomme ich einen LoadError on line 1038 of org/jruby/RubyKernel.. java: no such file to load rgbapng.. Wahrscheinlich ist es nur noch eine kleine Sache, die fehlt.. Bin dankbar für jeden Hinweis und forsche weiter.. März 2013 um 12:40.. Hast du es mal ganz normal über die Konsole kompiliert? Normalerweise wird da ein transparentes PNG errzeugt.. März 2013 um 14:34.. Ganz normal war die letzten Monate Scout für mich und ich würde mir wünschen dass das auch so bleibt.. https://github.. com/mhs/scout-app/wiki/Using-RubyGems-with-ScoutApp.. ist vielleicht die Lösung, etwas umständlicher als erwartet vielleicht.. Hoffe mal dass das irgendwie klappt.. März 2013 um 18:01.. Update:.. Es gibt eine Einschränkung bei Scout.. Das Einbinden von RubyGems, also anderen z.. Plugins wie z.. rgbapng, ist nicht vorgesehen.. Eine Self-made Lösung bietet der Entwickler momentan nur für OSX.. com/mhs/scout-app/wiki/Using-RubyGems-with-ScoutApp.. Für mich galt deswegen heute back to the commandline :-), obwohl das arbeiten mit scout schon praktisch war.. Kommentare sind geschlossen.. Werk 83.. Pepo..

    Original link path: /compass-sass-1472.html
    Open archive

  • Title: CSS3 Adventskalender 2011 – Tag 16 | maddesigns
    Descriptive info: …im Webstandard Blog zum Thema “.. CSS3 Toggler Vertikales Menu zum Auf- und Zuklappen.. “.. target.. IE9 CSS3 Support – CSS3 Adventskalender Tag 15..

    Original link path: /css3-adventskalender-2011-%e2%80%93-tag-16-1467.html
    Open archive

  • Title: Target | maddesigns
    Descriptive info: Schlagwort-Archiv: target..

    Original link path: /tag/target
    Open archive

  • Title: IE9 CSS3 Support – CSS3 Adventskalender Tag 15 | maddesigns
    Descriptive info: 15.. 10 Kommentare.. Heute mal ein Thema im CSS3 Adventskalender, das ja ab-und-zu etwas vernachlässigt wird, IE9 CSS3 Support oder was kann der IE9 überhaupt?.. Der Browser-Marktanteil des IE9 ist glücklicherweise steigend und wird mehr und mehr in Firmen und in Privathaushalten eingesetzt.. Die.. Statistik.. zeigt, das in Europa aktuell ca.. 10% mit IE9, ca.. 16% mit IE8 und nur knapp 3% den IE7 verwenden.. Dass der IE9 nicht so fortschrittlich ist, wie seine Konkurrenten, ist sicherlich auch hinlänglich bekannt.. Mit der Einführung des neuen Betriebssystem Mango für Windows Phone 7 ist nun auch der IE9 auf den Windows Phone 7 als Standard-Browser vorhanden und kann hier die neuen Features rund um HTML5 und CSS3 verarbeiten.. Der Marktanteil ist sicherlich noch sehr gering, wird aber.. sicherlich steigen.. in den nächsten Jahren.. Und wer behauptet, dass das Windows Phone 7 noch keine Relevanz hat, optimiert sicherlich noch für IE6 (#bewusstprovokantethese).. Übersicht CSS3-Features IE9.. Nun aber Butter bei die Fische, was geht mit dem Internet Explorer 9 und was nicht.. CSS3 Eigenschaft.. IE9 Support.. opacity.. ja.. multiple backgrounds.. background-clip.. background-size.. background-origin.. box-sizing.. ja (mit -ms-Präfix).. RGBA colors.. HSL colors.. HSLA colors.. @font-face.. @media.. CSS3 Selektoren.. border-image.. nein.. gradients.. transitions.. animations.. multiple columns.. resize.. Darfs ein wenig mehr sein?.. Ja gern, aber erst im IE10 Aber der IE9 unterstützt Größenangaben wie.. rem.. vh.. , sowie.. vw.. (Blogartikel von.. Jonathan Snook.. Allerdings sind die aufgeführten Eigenschaften (bis auf.. -ms-transform.. ) ohne Präfix integriert, also standardkonform.. Über das.. Rendering von border-radius.. wurde sich zudem ausführlich Gedanken gemacht und ist sehr gelungen meiner Meinung nach.. Eine Eigenschaft, die der IE9 unterstützt, aber auch noch nicht so häufig verwendet wurde, sind multiple Hintergrundbilder (background-image).. box { background: url(images/background-1.. png) no-repeat 50%  ...   das nicht schon getan habt).. CSS3 Adventskalender 2011 – Tag 14.. 10 Gedanken zu IE9 CSS3 Support – CSS3 Adventskalender Tag 15.. Jens Grochtdreis.. Dezember 2011 um 09:18.. Immerhin ist Microsoft endlich auf dem richtigen Weg.. Die fehlende gradient-Unterstützung kann man zumindest ansatzweise über die alten Filter nachrüsten.. Dann gehen zwar keine Farbstops, aber normale Verläufe klappen dann auch mit dem IE9.. Adventskalender am 15.. Leselinks #12 Codecandies.. Markus Günther.. Dezember 2011 um 00:35.. Nach Aussagen von Microsoft hat man aus dem Thema IE6 gelernt und es soll nie wieder so kommen.. Darf man gespannt sein!.. KW50: MacBook und.. NET-Entwickler, Unity3D Geld und mehr - Der Softwareentwickler Blog.. Leif Janzik.. Dezember 2011 um 16:53.. habe gerade etwas damit herumgespielt, im IE9 ist alles super, aber auf dem WP7.. 5 funktioniert bei mir -ms-transform überhaupt nicht.. muss man (neben dem doctype) noch irgendetwas anders machen, als man es sonst machen würde?.. Dezember 2011 um 17:00.. Hm, schwer zu sagen, da ich kein Windows Phone 7 zum Testen da habe, aber laut.. http://windowsteamblog.. com/windows_phone/b/wpdev/archive/2011/09/22/ie9-mobile-developer-overview.. aspx.. sollte es funktionieren.. Dezember 2011 um 17:15.. wenn ich mit dem Gerät auf.. http://haz.. io.. gehe, wird auch gesagt, dass es unterstützt wird.. Aber die Realität sieht leider anders aus.. Oder ich mache irgendetwas fundamental falsch, dann verstehe ich allerdings nicht warum es im Desktop IE funktioniert.. Dezember 2011 um 17:24.. was ist damit?.. http://jsfiddle.. net/maddesigns/xgQ6M/embedded/result/.. geht das?.. Dezember 2011 um 17:38.. hmm das funktioniert.. Ich vermute langsam es liegt daran, dass ich die Datei eben schnell über das public Verzeichnis von Dropbox aufgerufen habe.. Denn wenn ich deinen Code 1:1 kopiere und über Dropbox aufrufe klappt es auch da nicht.. muss das mal in Ruhe von richtigem Webspace aus testen..

    Original link path: /ie9-css3-support-1445.html
    Open archive

  • Title: Css3 | maddesigns - Part 6
    Descriptive info: Schlagwort-Archiv: css3.. Gastartikel im Webstandards-Blog Formular Design mit CSS3.. 14.. Juli 2010.. Mein neuer Artikel über die Verwendung von CSS3 in Formularen wurde diese Woche im.. Webstandard-Blog.. veröffentlicht.. m Tutorial kommen moderne CSS3-Eigenschaften wie border-radius, box-shadow, text-shadow sowie die neuen Möglichkeiten der Hintergrundgestaltung mit background: linear-gradient (ein Umfangreiches Tutorial zu.. Verlauf ohne Bilder (CSS3 linear-gradient).. habe ich im Marit AG TYPO3 Blog veröffentlicht) zum Einsatz.. CSS-Tutorial.. Formular Design mit CSS3 Visuelle Gestaltung und der Verzicht auf Grafiken.. CSS Tutorial Teil 2:.. CSS3 Tutorial Webdesign ohne Grafiken dank CSS Transform.. Zurück..

    Original link path: /tag/css3/page/6
    Open archive

  • Title: IE-Debugging via VirtualBox mit modern.ie | maddesigns
    Descriptive info: IE-Debugging via VirtualBox mit modern.. ie.. 12.. 8 Kommentare.. Alltag für Webentwickler dürfte das Testen der Webseiten im Internet Explorer sein.. Wo hingegen bei Firefox oder Chrome es einen kürzeren Releasezyklus gibt, wurde der IE in den letzten Jahren sehr selten erneuert.. Das Problem ist (wie beim Safari) dass das Browser-Upgrade ans Betriebssystem geknüpft ist.. Hinderlich ist es auch, das man nicht mehrere IE-Versionen parallel installieren kann.. Früher™ hatte man sich mit.. IETester.. beholfen um gleichzeitig mehrere IEs zu testen.. Bereits seit IE8 kann man das Rendering in den IE-Developer-Tools umstellen und die Seite in einer älteren IE-Version gerendert betrachten.. Das reicht auch oft für den ersten Eindruck, ist aber nicht so verlässlich wie eine isolierte Version von Browser und Betriebssystem.. Zudem kann man am Mac keinen IE installieren.. Im Netz gibt es zwar einige Tools wie.. IE NetRenderer.. , die Screenshots von IE-Versionen generieren.. Das hilft aber nicht weiter wenn man einen Darstellungsfehler entdeckt, Debugging ist natürlich nicht möglich.. Internet Explorer via VirtualBox oder VMware Fusion.. Um sicher zu testen, sollte man auf virtuelle Maschinen zurück greifen.. Prominente Tools sind.. VMware Fusion.. Parallels Desktop.. oder.. VirtualBox.. In VirtualBox kann man aber nicht nur Windows und IE installieren, sondern auch andere Systeme abbilden.. VirtualBox wird aktuell sehr häufig mit.. Vagrant.. genutzt um z.. eine Live-Server-Umgebung abzubilden.. Seit einiger Zeit gibt es eine Initiative von Microsoft um das Testen von Webseiten auf verschieden Internet Explorer zu erleichtern –.. modern.. Mit dem Online-Tool kann man eine bestehende Seite im Netz überprüfen, ob z.. die Möglichkeiten für Windows 8 ausgeschöpft werden ob proprietäre CSS-Eigenschaften verwendet werden.. Zudem bietet Microsoft dedizierte virtuelle Maschinen für das lokale Testen zum Herunterladen an.. Über modern.. ie bekommt man zudem eine 3-monatige Testphase für Browserstack.. Testen mit Browserstack.. Browserstack.. ist ein Service, mit dem man nicht nur die IEs, sondern auch eine Vielzahl mobiler Devices testen kann.. Browserstack stellt virtuelle Maschinen oder Emulatoren zur Verfügung auf denen man dann via Tunnel eine Webseite debuggen kann und besitzt zudem eine REST API zum automatisierten Testen.. Codepen.. -Snippets können ebenfalls on-the-fly via.. Browserstack getestet werden.. Internet Explorer als virtuelle Maschine mit VirtualBox installieren.. Ich benutze schon seit einiger Zeit VirtualBox und spezielle virtuelle Maschinen für das lokale Testen von IE8 Co.. Bei der Installation der Boxen half mir ein Shell-Script von.. ievms.. Beim Installieren kann man zudem  ...   ein anderer Pfad angegeben werden um die virtuelle Maschine auf der SD-Karte zu speichern.. Das Script anwerfen und Kaffee trinken gehen oder so.. Das Installieren dauert eine Weile, da extern speichern bekanntermaßen noch langsamer als intern speichern ist.. sh | env IEVMS_VERSIONS="7" INSTALL_PATH="/Volumes/SanDisk64/.. ievms" bash.. Installationspfad anpassen: /Volumes/[YOUR_SDCARD_NAME].. Das ievms Shell-Script erstellt automatisch einen Sicherungspunkt, zu dem man nach Ablauf der 90-Tage-Windows-Testphase zurückkehren kann und die VMs nicht erneut herunterladen und installieren muss.. Bis dahin kann man Windows völlig.. kostenlos.. nutzen.. Wenn alles installiert ist, kann man die Maschinen starten (eine nach der anderen) und weitere Einstellungen machen.. Die Maschinen werden per default mit englischer Tastatur installiert.. Ich stelle diese immer auf deutsch um und erstelle dann nochmal einen Snapshot (Sicherungspunkt).. Ansicht maddesigns.. de im IE11 auf Windows 7.. debugging.. testing.. virtualbox.. Individuelle responsive Gridsysteme mit Sass.. 8 Gedanken zu IE-Debugging via VirtualBox mit modern.. ie.. Nils Windisch.. Dezember 2013 um 13:41.. sweet, danke für die Anleitung.. Heiko Mamerow.. Dezember 2013 um 20:47.. Hallo und Danke für den Artikel.. Gretchenfrage: Wenn man die Windows-VMs installiert braucht man sicherlich jedesmal eine Seriennummer für Windows?.. Dezember 2013 um 20:49.. Nein, die 90-Tage-Windows-Testversion ist kostenlos.. Sascha.. 13.. Dezember 2013 um 09:57.. Danke Sven dafür.. Ein Hinseis: Der Link zu modern.. ie ist relativ.. Daher kommt man auf maddesigns.. de/modern.. ie, die es nicht gibt.. Dezember 2013 um 11:54.. danke! gefixt.. Christoph Rumpel.. 30.. Dezember 2013 um 11:45.. Hi Sven,.. ich nutze auch die IE VMs.. Was mich aber nervt ist das neu installieren jedes Monat.. Wenn ich das richtig verstanden habe, hast du aber auch keine Lizenzen und installierst jedes Monat neu?.. Danke und lg.. Dezember 2013 um 12:48.. Hallo Christoph!.. Nein, man braucht keine Lizenzen.. Die VMs laufen in der Testversion 90 Tage (3 Monate) kostenlos.. Wenn diese abgelaufen sind, einfach zum Sicherungspunkt 1 zurück gehen und die Zeit läuft wieder von 0.. Ich musste nur ein einziges Mal neu installieren, da die VM oder der Sicherungspunkt kaputt waren.. 7.. Januar 2014 um 21:52.. Hey Sven,.. habe deine Antwort leider erst jetzt gesehen.. Also ich wäre mir fast sicher gewesen, dass das mit dem Sicherungspunkt 1 (du meinst eh den Standard Snapshot der automatisch gemacht wird in Virtual Box?) nicht funktioniert.. Aber vielleicht hat da bei mir damals was anderes nicht funktioniert.. Ich werde das noch einmal testen.. Danke dir..

    Original link path: /internet-explorer-debugging-mit-virtualbox-1967.html
    Open archive

  • Title: Debugging | maddesigns
    Descriptive info: Schlagwort-Archiv: debugging..

    Original link path: /tag/debugging
    Open archive

  • Title: CSS3 Adventskalender Tag 8 | maddesigns
    Descriptive info: CSS3 Adventskalender Tag 8.. Dezember 2010.. im Webstandard Blog zum Thema.. “CSS3 @font-face CSS Fonts-Modul”.. !.. text-shadow Text-Effekte CSS3 Adventskalender Tag 7.. Teaserboxen komplett ohne Bilder CSS3 Adventskalender Tag 9..

    Original link path: /css3-adventskalender-tag-8-484.html
    Open archive

  • Title: Books | maddesigns
    Descriptive info: Schlagwort-Archiv: books.. CSS Performance Artikel Teil 2.. 3.. Februar 2011.. Beim TYPO3camp 2010 in München hielt ich eine Vortrag zum Thema CSS Performance.. Im.. ging es überwiegend um das Optimieren von CSS.. Im 2.. Teil geht es um die Frontend-Performance, also die Optimierung der Ladezeit.. books.. css sprites.. image-renderung.. js.. tools..

    Original link path: /tag/books
    Open archive

  • Title: Css Sprites | maddesigns
    Descriptive info: Schlagwort-Archiv: css sprites..

    Original link path: /tag/css-sprites
    Open archive

  • Title: Responsive Image Map
    Descriptive info: Responsive Image Map.. Hinweis:.. bei 600px gibt es einen Breakpoint, der die Imagemap entweder als richtige Imagemap mit Klickflächen darstellen lässt oder als Bild mit einer Beschreibungsliste.. Bei Betrachtung am Desktop und Verkleinerung des Browserfensters muss die Seite neu geladen werden, es findet kein neu initiieren durch einen resize/orientationchange Event statt.. Imagemap Kitty.. Ohren.. Reprehenderit exercitationem beatae ipsam similique assumenda nemo quis quod ut aspernatur rerum nam.. omnis dolores nostrum voluptas nulla corporis quasi accusamus.. placeat nesciunt rerum velit et rem corporis vel.. Augen.. Aliquid magnam magni aut corporis quia est quis.. vel libero aut aspernatur et..  ...   rerum cumque nesciunt qui vitae nostrum laboriosam.. vel quia aliquam unde.. necessitatibus accusantium veniam aut.. Barthaar.. Magnam ut facere illo molestias repellat numquam rerum.. dolorem consequatur harum dolorem voluptatibus officiis praesentium ut et veritatis.. unde quia laudantium distinctio laborum sapiente et eos voluptate aperiam magnam repudiandae est.. ut aspernatur quia eos et et deleniti assumenda dolorem numquam aperiam magni sed expedita.. quod voluptate dicta dolor molestias ea.. Lorem ipsum dolor sit amet, consectetur adipisicing elit.. Earum, repellendus culpa et deserunt temporibus iusto asperiores laboriosam.. Optio, aperiam, ad illo incidunt qui nostrum suscipit cupiditate maiores cum deserunt ipsum..

    Original link path: /responsive-image-map/
    Open archive





  • Archived pages: 254