Fil de 艾略特 (@elliotchen100)

« Le développement front-end ne mourra jamais » - Série originale chapitre pixel à pixel Le développement front-end ne mourra jamais ; nous apprécions et avons plus que jamais besoin d'ingénieurs front-end maîtrisant le rendu pixel par pixel. À l'époque, les développeurs front-end recevaient des fichiers Photoshop de la part de spécialistes du découpage d'images. Les maquettes de ces fichiers étaient divisées en sections : en-tête, navigation, corps et pied de page. (À cette époque, les bannières Hero sophistiquées n'existaient pas encore ; un carrousel intégré à la maquette était déjà un atout majeur.) Une fois que l'interface utilisateur reçoit le fichier Photoshop segmenté, qui contient des régions, des sous-régions et des calques, elle peut exporter les ressources nécessaires en fonction de ses besoins, puis construire la page en fonction des valeurs, des dimensions et de l'arrière-plan indiqués. Le composant frontal doit extraire les valeurs de couleur, optimiser les images pour les applications web, apprendre à masquer l'arrière-plan et connaître les différences entre JPG et PNG, la gamme de couleurs et la taille. Avant l'avènement des grilles et des flexboxes, centrer un div de taille inconnue pouvait rendre fous les développeurs front-end. À l'époque, un adage populaire disait qu'un bon développeur front-end devait être capable de reproduire le design à l'identique sur la page, d'où l'expression « pixel à pixel ». Cela paraît simple, n'est-ce pas ? Mais savez-vous qu'à cette époque, Chrome ne détenait que 10 % de parts de marché, et qu'il existait de nombreux navigateurs utilisant différents moteurs de rendu, tels que Webkit (Chrome), Gecko (Firefox) et Presto (Opera) ? À l'époque, un autre navigateur semait la pagaille. Arrogant et dominateur, il était utilisé par tous nos parents. Son moteur de rendu s'appelait Trident et il s'appelait IE, Internet Explorer. Cela signifie que le principal obstacle pour le développement front-end est la diversité des navigateurs. Il est important de noter que ces navigateurs affichent les contenus différemment selon les systèmes d'exploitation (Windows ou macOS). Notez également que le tristement célèbre IE (Internet Explorer) est différent dans chaque version. Par conséquent, afin d'obtenir une conversion pixel à pixel sur différents navigateurs, les développeurs front-end doivent écrire de nombreuses règles, effectuer des tests répétés et maudire Internet Explorer des milliers de fois par jour. Au final, les développeurs front-end ont dû faire des compromis pour préserver les parts de marché d'Internet Explorer, tout en essayant d'offrir une expérience utilisateur agréable et élégante aux parents qui utilisent IE6. Savez-vous combien d'efforts ils ont dû déployer ? Chapitre suivant : L’avènement du design adaptatif